/* ===== tokens/fonts.css ===== */
/* LiveSOP webfonts — Inter (primary) + Lato (secondary).
   Both are the exact families used in the source Figma file and are
   served from Google Fonts. No local binaries ship with this system;
   consumers need network access to render the real faces. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Lato:wght@400;600;700&display=swap');

/* ===== tokens/colors.css ===== */
/* ============================================================
   LiveSOP — Color tokens
   Extracted verbatim from LiveSOP.fig (Components ▸ Colors frame
   + measured usage). Light theme. Hex values are exact.
   ============================================================ */
:root {
  /* ---- Brand blue ---- */
  --ls-blue: #4a90e2;          /* rgb(74,144,226) — primary CTA / buttons */
  --ls-blue-600: #2d91e9;      /* rgb(45,145,233) — links, active accents */
  --ls-blue-550: #3892eb;      /* rgb(56,146,235) */
  --ls-blue-strong: #114bf7;   /* rgb(17,75,247)  — pressed / emphatic */
  --ls-navy: #26304e;          /* rgb(38,48,78)   — dark surface / sidebar */
  --ls-blue-soft: #eaf4fd;     /* rgb(234,244,253)— tinted fill / hover */

  /* ---- Ink / text ---- */
  --ls-ink: #2f2f2f;           /* rgb(47,47,47)   — primary body text */
  --ls-headline: #323339;      /* rgb(50,51,57)   — headlines */
  --ls-ink-70: #707070;        /* rgb(112,112,112)— secondary text */
  --ls-muted: #6e7488;         /* rgb(110,116,136)— muted / meta */
  --ls-dim: #8a8e9b;           /* rgb(138,142,155)— placeholder / disabled */
  --ls-on-dark: #ffffff;

  /* ---- Neutrals / surfaces ---- */
  --ls-white: #ffffff;
  --ls-surface: #ffffff;       /* cards, inputs */
  --ls-surface-2: #f9fafb;     /* rgb(249,250,251)— subtle raised */
  --ls-surface-3: #fcfdfd;     /* rgb(252,253,253) */
  --ls-canvas: #f7f5f2;        /* app canvas (warm off-white) */

  /* ---- Borders / lines ---- */
  --ls-border: #cdced3;        /* rgb(205,206,211)— default input/card stroke */
  --ls-border-2: #d9dbe3;      /* rgb(217,219,227)— soft divider */
  --ls-border-3: #e8e8e8;      /* rgb(232,232,232)— light fill/divider */
  --ls-border-4: #ebebeb;      /* rgb(235,235,235) */

  /* ---- Semantic ---- */
  --ls-red: #e30000;           /* rgb(227,0,0)    — error / destructive */
  --ls-red-soft: #ea4f4f;      /* softer red */
  --ls-orange: #fa8e6c;        /* rgb(250,142,108)— warning stroke / delay */
  --ls-green: #72bf7e;         /* rgb(114,191,126)— success / active */
  --ls-amber: #f5a623;         /* warning / standby */

  /* ---- Semantic aliases ---- */
  --text-strong: var(--ls-headline);
  --text-body: var(--ls-ink);
  --text-secondary: var(--ls-ink-70);
  --text-muted: var(--ls-muted);
  --text-placeholder: var(--ls-dim);
  --text-link: var(--ls-blue-600);

  --surface-card: var(--ls-surface);
  --surface-canvas: var(--ls-canvas);
  --surface-sunken: var(--ls-surface-2);

  --border-default: var(--ls-border);
  --border-soft: var(--ls-border-2);
  --border-divider: var(--ls-border-3);

  --accent: var(--ls-blue);
  --accent-hover: var(--ls-blue-600);
  --accent-pressed: var(--ls-blue-strong);
  --accent-soft: var(--ls-blue-soft);

  --danger: var(--ls-red);
  --warning: var(--ls-orange);
  --success: var(--ls-green);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   LiveSOP — Typography tokens
   Families & sizes measured from LiveSOP.fig. Inter is the UI face;
   Lato is used for dense data (table headers, input values) at 13–14px.
   Type scale mirrors the Components ▸ Typography specimen frame.
   ============================================================ */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-data: 'Lato', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* weights */
  --fw-light: 300;     /* @kind other */
  --fw-regular: 400;   /* @kind other */
  --fw-medium: 500;    /* @kind other */
  --fw-semibold: 600;  /* @kind other */
  --fw-bold: 700;      /* @kind other */

  /* ---- Type scale (name : size / line-height / weight) ----
     From the Typography specimen frame (all Inter unless noted). */
  --type-headline-1: 400 28px/1.0 var(--font-sans);   /* #323339 */
  --type-headline-2: 400 24px/1.15 var(--font-sans);
  --type-headline-3: 400 20px/1.2 var(--font-sans);
  --type-subheadline: 400 20px/1.2 var(--font-sans);  /* #707070 */
  --type-tab: 400 16px/1.2 var(--font-sans);
  --type-cta: 600 14px/1.0 var(--font-sans);          /* #4a90e2 */
  --type-body: 400 14px/1.5 var(--font-sans);         /* #2f2f2f */
  --type-body-small: 400 12px/1.4 var(--font-sans);   /* #707070 */
  --type-label: 700 12px/1.2 var(--font-sans);        /* uppercase labels */
  --type-column: 700 13px/1.2 var(--font-data);       /* Lato — table headers */

  /* raw size ramp */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* base */
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;

  --lh-tight: 1.0;   /* @kind other */
  --lh-snug: 1.2;    /* @kind other */
  --lh-normal: 1.5;  /* @kind other */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   LiveSOP — Spacing & radius tokens
   Derived from component paddings/gaps in LiveSOP.fig
   (buttons gap 10, input pad 8/16, card radius 16, button radius 8).
   ============================================================ */
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;   /* card header gap */
  --space-12: 12px;
  --space-16: 16px;   /* input horizontal padding */
  --space-20: 20px;   /* card body padding */
  --space-22: 22px;
  --space-24: 24px;
  --space-32: 32px;

  /* ---- Radii (exact from source) ---- */
  --radius-sm: 5px;    /* chips / small containers */
  --radius-md: 8px;    /* buttons, inputs, selects */
  --radius-lg: 10px;   /* soft inputs / segmented control */
  --radius-xl: 16px;   /* cards */
  --radius-pill: 999px;

  /* ---- Control heights ---- */
  --control-sm: 32px;  /* small button */
  --control-md: 40px;  /* input / large button */
}

/* ===== tokens/effects.css ===== */
/* ============================================================
   LiveSOP — Elevation, border & motion tokens
   Shadow alphas measured from LiveSOP.fig (0.161 / 0.25 / 0.278 black).
   ============================================================ */
:root {
  /* Inset stroke used by inputs in the source (boxShadow inset 1px) */
  --shadow-input-inset: inset 0 0 0 1px var(--ls-border);
  --shadow-input-focus: inset 0 0 0 1.5px var(--ls-blue);

  /* Elevation ramp */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.161);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.161);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.25);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.278);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --dur-fast: 0.12s;  /* @kind other */
  --dur-base: 0.18s;  /* @kind other */
  --dur-slow: 0.28s;  /* @kind other */
}