/* ============================================================
   THE TOKEN FILE (2026-09-10). One file, every surface.

   The reference is Framer's editor, scaled up ten percent (Alan,
   2026-09-10: "go like Framer but 10% bigger everything"). Framer runs
   Inter at 12px on a 30px control with a 46px row pitch; this file runs
   Inter at 13px on a 32px control with a 48px row pitch, on the 4px grid.

   Names carry the --ui- prefix so nothing here collides with the three
   older token sets (styles.css --bg, desk.css --desk-*, lbstudio --lb-*).
   Those sets are being retired surface by surface; while a surface still
   reads the old names, its root remaps them onto these (see
   src/lbstudio/boot/lbstudio.css, "token bridge").

   Rules that the values encode:
   - Type is Inter, two weights: 400 for everything, 500 for a section
     title or the one primary action. Never 600 or above.
   - Hierarchy comes from size, ink and spacing. Muted text is never
     dimmer than --ui-muted (4.5:1 on a panel, both themes).
   - Selected is a raised neutral grey (Alan, 2026-09-11: "not pitch
     white, a bit grayish"); the accent red is for the ONE primary action
     and for live status only.
   - Every corner is a radius token. Pills and circles are the only fully
     round shapes.
   ============================================================ */

:root {
  /* ---- type ---- */
  --ui-font: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui-fs-xs: 12px;   /* secondary: hints, captions, sub-labels */
  --ui-fs-sm: 13px;   /* the working size: labels, values, buttons, menu items, list rows */
  --ui-fs-md: 14px;   /* panel and section titles, dialog body */
  --ui-fs-lg: 16px;   /* dialog and sheet titles */
  --ui-fs-xl: 20px;   /* page titles */
  --ui-fs-2xl: 26px;  /* hero lines */
  --ui-lh: 1.45;
  --ui-lh-tight: 1.2;
  --ui-fw: 400;
  --ui-fw-medium: 500;
  --ui-tnum: "tnum" 1, "cv11" 1; /* tabular figures for anything that changes */

  /* ---- controls ---- */
  --ui-ctl-xs: 24px;  /* icon buttons inside a dense row */
  --ui-ctl-sm: 28px;  /* compact buttons, chips, transport */
  --ui-ctl-md: 32px;  /* THE control height: buttons, inputs, selects, tabs */
  --ui-ctl-lg: 36px;  /* the one primary action */
  --ui-ctl-xl: 40px;  /* hero buttons on the marketing surfaces */
  --ui-icon-sm: 14px;  /* inside a 24px button */
  --ui-icon: 18px;     /* the working icon (Framer's 16, scaled); Phosphor duotone */
  --ui-icon-lg: 22px;  /* rail tiles, empty states */
  --ui-swatch: 20px;

  /* ---- spacing (4px grid) ---- */
  --ui-sp-1: 4px;
  --ui-sp-2: 8px;
  --ui-sp-3: 12px;
  --ui-sp-4: 16px;
  --ui-sp-5: 20px;
  --ui-sp-6: 24px;
  --ui-sp-8: 32px;
  --ui-sp-10: 40px;
  --ui-row: 48px;          /* one property row: a 32px control with 16px of air */
  --ui-row-dense: 40px;    /* a list row */
  --ui-section-head: 44px; /* a fold's title row */
  --ui-section-head-lg: 52px; /* a main group's title row */
  --ui-panel-pad: 16px;
  --ui-panel-w: 372px;     /* Framer's 304 inspector, scaled, plus room for a slider row with its marks */
  --ui-topbar-h: 56px;
  --ui-label-w: 100px;     /* the label column of a property row; a long label wraps to two lines */

  /* ---- radii ---- */
  --ui-r-sm: 4px;    /* 24px icon buttons, chips, swatches */
  --ui-r-ctl: 6px;   /* every control */
  --ui-r-card: 8px;  /* cards, panels, tiles */
  --ui-r-pop: 10px;  /* popovers, menus, dialogs */
  /* Apple's corner: a superellipse, not a circle (Alan, 2026-09-11, "Apple
     style corners but less rounded"). The native corner-shape property; a
     browser without it simply draws the round corner. Circles and pills keep
     round. */
  --ui-corner: squircle;
  --ui-r-pill: 999px;

  /* ---- layers ---- */
  --ui-z-raised: 10;
  --ui-z-sticky: 100;
  --ui-z-overlay: 1000;
  --ui-z-popover: 1100;
  --ui-z-toast: 1200;

  /* ---- motion ---- */
  --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-dur-fast: 120ms;
  --ui-dur: 180ms;

  /* ---- focus ---- */
  --ui-ring-w: 2px;
  --ui-ring-offset: 2px;

  /* ---- dark palette (the default; an unset data-theme lands here) ----
     Every grey carries one step of red and two steps less blue (Alan,
     2026-09-12: "a tiny bit warm"), the same lightness as the neutral it
     replaced, so the roles and their contrast are unchanged. */
  --ui-bg: #100f0d;            /* the workspace ground behind everything */
  --ui-surface: #191816;       /* panels, rails, the top bar */
  --ui-surface-2: #242321;     /* a control on a panel, a hover on a list row */
  --ui-surface-3: #2d2c2a;     /* a hovered control, a pressed row */
  --ui-line: #272624;          /* hairline on a panel */
  --ui-line-strong: #373634;   /* a control's border, a divider that must read */
  --ui-ink: #f3f2f0;           /* text and marks */
  --ui-ink-2: #a7a6a4;         /* secondary text, 6.9:1 on the surface */
  --ui-muted: #8d8c8a;         /* tertiary text, 5.0:1 on the surface */
  --ui-faint: #5b5a58;         /* non-text only: disabled outlines, placeholders' marks */
  --ui-selected: #3b3a38;      /* the raised grey of a picked thing (Framer's), never a white fill */
  --ui-on-selected: #f3f2f0;
  --ui-accent: #ef282d;        /* the brand red, unchanged */
  --ui-accent-hover: #ff383d;
  --ui-on-accent: #ffffff;
  --ui-accent-text: #ff5257;   /* red as text needs the lift to clear 4.5:1 */
  --ui-ok: #4ec27d;
  --ui-warn: #e8b83a;
  --ui-ring: rgba(243, 242, 240, 0.85);
  --ui-glass: rgba(25, 24, 22, 0.92);
  --ui-scrim: rgba(0, 0, 0, 0.55);
  --ui-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 254, 253, 0.06);
  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ui-track: #2d2c2a;         /* an empty slider track */
  --ui-track-fill: #dad9d7;    /* the filled part, neutral like a selection */
  --ui-thumb: #f3f2f0;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ui-bg: #f1f0ee;
  --ui-surface: #fffefd;
  --ui-surface-2: #f3f2f0;
  --ui-surface-3: #e9e8e6;
  --ui-line: #e9e8e6;
  --ui-line-strong: #d7d6d4;
  --ui-ink: #12110f;
  --ui-ink-2: #5d5c5a;
  --ui-muted: #71706e;         /* 5.0:1 on white */
  --ui-faint: #b9b8b6;
  --ui-selected: #d7d6d4;
  --ui-on-selected: #12110f;
  --ui-accent: #ef282d;
  --ui-accent-hover: #d91f24;
  --ui-on-accent: #ffffff;
  --ui-accent-text: #d41f24;   /* 4.9:1 on white */
  --ui-ok: #1f9d55;
  --ui-warn: #b8860b;
  --ui-ring: rgba(18, 17, 15, 0.7);
  --ui-glass: rgba(255, 254, 253, 0.92);
  --ui-scrim: rgba(0, 0, 0, 0.35);
  --ui-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ui-track: #e5e4e2;
  --ui-track-fill: #2b2a28;
  --ui-thumb: #fffefd;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ui-dur-fast: 0ms; --ui-dur: 0ms; }
}