/* =============================================================================
   DESIGN TOKENS: the Forge design system, in three layers, cascade order.

     1. PRIMITIVE  raw palette and scales, never used directly in components
     2. SEMANTIC   purpose-named aliases; THESE are what components use
     3. COMPONENT  component-specific tokens, defined next to their component
                   in components.css, built from the semantic layer

   Forge (Claude Design project "YoursTools Redesign") is a warm-grey INK ramp
   for text, borders and dark surfaces; COBALT as the single action colour;
   AMBER as the accent; mint, coral and violet only for status and chart
   series. Two page backgrounds at most: --surface-page and --surface-band.
   No gradient backgrounds anywhere.

   The site's older semantic names (--color-primary, --text-primary,
   --border-color, --bg-secondary ...) are kept and re-pointed at Forge, so
   the 1,300+ existing var() call sites pick the system up without a blind
   find-and-replace. New component work should use the Forge names
   (--text-strong, --surface-band, --border-hairline ...).

   Adding a colour: add the primitive here, alias it under SEMANTIC, then use
   the semantic name. Never put a raw hex in a component file.
   ============================================================================= */
:root {
  /* ---- 1. PRIMITIVE ------------------------------------------------------ */

  /* Ink: warm near-black neutrals. 560 and 520 are not in Forge: they are
     AA-tuned steps for muted and subtle text, because Forge's ink-500 is
     4.33:1 on the band surface and ink-400 is 2.71:1 on white. */
  --ink-950: #0d1015;
  --ink-925: #11151b;
  --ink-900: #14181f;
  --ink-800: #1d232c;
  --ink-700: #2b333f;
  --ink-600: #4a5464;
  --ink-560: #5f6a7a;   /* 4.84:1 on ink-100, 5.15:1 on ink-050 */
  --ink-520: #657080;   /* 5.02:1 on white, 4.72:1 on ink-050 */
  --ink-500: #6b7686;
  --ink-400: #949eac;
  --ink-300: #c2c9d3;
  --ink-200: #e0e5ec;
  --ink-100: #eef1f5;
  --ink-050: #f6f8fa;
  --paper: #ffffff;
  --paper-warm: #fbfaf7;

  /* Cobalt: primary. 200 and 950 are dark-mode additions. */
  --cobalt-950: #151d3a;
  --cobalt-700: #1633b8;
  --cobalt-600: #1f42e0;
  --cobalt-500: #2b55f5;
  --cobalt-400: #5b7cfb;
  --cobalt-300: #9db0fd;
  --cobalt-200: #c3cffe;
  --cobalt-100: #e5eaff;
  --cobalt-050: #f2f5ff;

  /* Amber: accent (headline underline, accent CTA, chart series 2). */
  --amber-950: #2a2110;
  --amber-700: #9a5d04;   /* text on amber-050: 5.03:1 */
  --amber-600: #c97a06;
  --amber-500: #f59f0b;
  --amber-400: #fbbf3f;
  --amber-200: #fde7b3;
  --amber-050: #fff8e8;

  /* Secondary accents: status and chart series 3 to 5 only, never chrome.
     The 700 steps are text-on-tint shades (Forge's 500/600 are 2.85 to
     3.09:1 on their own soft tints). */
  --coral-950: #33161a;
  --coral-700: #b92f35;   /* 5.03:1 on coral-100 */
  --coral-500: #f2555a;
  --coral-400: #ff7a7e;
  --coral-100: #ffe6e7;
  --mint-950: #0d2a20;
  --mint-700: #0b7a55;    /* 4.65:1 on mint-100 */
  --mint-600: #0f9b6c;
  --mint-500: #17c088;
  --mint-100: #d8f6ea;
  --violet-500: #7c5cf0;
  --violet-300: #b3a1f7;
  --violet-100: #ece7fe;

  /* Legacy primitive names still referenced directly by the studio UIs in
     components.css (~114 call sites). Re-pointed at ink so those surfaces
     join the palette without touching every rule. */
  --color-slate-50: var(--ink-050);
  --color-slate-100: var(--ink-100);
  --color-slate-200: var(--ink-200);
  --color-slate-300: var(--ink-300);
  --color-slate-400: var(--ink-400);
  --color-slate-500: var(--ink-520);
  --color-slate-600: var(--ink-600);
  --color-slate-700: var(--ink-700);
  --color-slate-900: var(--ink-950);
  --color-gray-50: var(--ink-050);
  --color-gray-100: var(--ink-100);
  --color-gray-200: var(--ink-200);
  --color-gray-300: var(--ink-300);
  --color-gray-400: var(--ink-400);
  --color-gray-500: var(--ink-520);
  --color-gray-600: var(--ink-600);
  --color-gray-700: var(--ink-700);
  --color-gray-800: var(--ink-800);
  --color-gray-900: var(--ink-900);
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- 2. SEMANTIC (Forge names) ------------------------------------------ */

  --text-strong: var(--ink-950);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-560);
  --text-subtle: var(--ink-520);
  --text-inverse: #ffffff;
  --text-link: var(--cobalt-600);
  --text-link-hover: var(--cobalt-700);
  --text-highlight: var(--cobalt-600);

  --surface-page: var(--paper);
  --surface-band: var(--ink-050);
  --surface-band-warm: var(--paper-warm);
  --surface-card: #ffffff;
  --surface-sunken: var(--ink-100);
  --surface-inverse: var(--ink-950);
  --surface-brand: var(--cobalt-500);
  --surface-brand-soft: var(--cobalt-050);
  --surface-accent-soft: var(--amber-050);

  --border-hairline: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand: var(--cobalt-300);
  --focus-ring: var(--cobalt-400);

  --action-primary: var(--cobalt-500);
  --action-primary-hover: var(--cobalt-600);
  --action-primary-press: var(--cobalt-700);
  --action-neutral: var(--ink-950);
  --action-neutral-hover: var(--ink-800);
  --action-neutral-text: #ffffff;
  --action-ghost-hover: var(--ink-100);

  /* Solid status colours (dots, meter fills, icons) and the text shade that
     passes AA on each soft tint. */
  --status-success: var(--mint-600);
  --status-success-text: var(--mint-700);
  --status-success-soft: var(--mint-100);
  --status-warning: var(--amber-600);
  --status-warning-text: var(--amber-700);
  --status-warning-soft: var(--amber-050);
  --status-danger: var(--coral-500);
  --status-danger-text: var(--coral-700);
  --status-danger-soft: var(--coral-100);
  --status-info: var(--cobalt-600);
  --status-info-text: var(--cobalt-700);
  --status-info-soft: var(--cobalt-100);

  /* Chart series: assign strictly in order, keep stable across a page. */
  --chart-1: var(--cobalt-500);
  --chart-2: var(--amber-500);
  --chart-3: var(--mint-500);
  --chart-4: var(--violet-500);
  --chart-5: var(--coral-500);
  --chart-6: var(--ink-400);

  /* ---- 2b. SEMANTIC (site names, re-pointed) ------------------------------ */

  --color-primary: var(--action-primary);
  --color-primary-dark: var(--action-primary-hover);
  --color-primary-light: var(--cobalt-400);
  /* Primary used as TEXT (links, labels). Light mode is cobalt-600 (7.21:1);
     dark mode swaps in cobalt-300, because a mid blue on a near-black
     surface fails AA for body text. */
  --color-accent-text: var(--text-link);
  --color-secondary: var(--ink-950);
  --color-accent: var(--amber-500);
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-error: var(--status-danger);
  --color-info: var(--status-info);

  --bg-primary: var(--surface-page);
  --bg-secondary: var(--surface-band);
  --bg-tertiary: var(--surface-sunken);
  --text-primary: var(--text-strong);
  --text-secondary: var(--text-body);
  --border-color: var(--border-hairline);

  /* Editor/panel surfaces (code editors, JSON/diff studios, timestamp cards). */
  --surface-1: var(--surface-card);
  --surface-2: var(--surface-band);
  --surface-3: var(--surface-sunken);

  /* Six-step scale for the BMI band chart and similar range graphics. */
  --band-1: var(--cobalt-300);
  --band-2: var(--mint-500);
  --band-3: var(--amber-400);
  --band-4: var(--amber-500);
  --band-5: var(--coral-500);
  --band-6: var(--coral-700);

  /* ---- Shadows: five steps, border and shadow together on cards ---------- */
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-xs: 0 1px 2px rgba(13, 16, 21, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 16, 21, 0.07), 0 1px 1px rgba(13, 16, 21, 0.04);
  --shadow-card: 0 2px 6px rgba(13, 16, 21, 0.05), 0 12px 28px -12px rgba(13, 16, 21, 0.12);
  --shadow-lifted: 0 8px 16px rgba(13, 16, 21, 0.06), 0 28px 56px -20px rgba(13, 16, 21, 0.18);
  --shadow-screenshot: 0 24px 72px -24px rgba(13, 16, 21, 0.28), 0 0 0 1px var(--border-hairline);
  --shadow-brand: 0 8px 20px -6px rgba(43, 85, 245, 0.45);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --ring-focus: 0 0 0 3px var(--cobalt-100), 0 0 0 1px var(--focus-ring);
  /* site names */
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-lifted);
  --shadow-xl: var(--shadow-lifted);

  /* ---- Typography --------------------------------------------------------- */
  /* Display is Sora above 22px; body IBM Plex Sans; IBM Plex Mono for every
     number in a table, every delta, code and token values. Each stack puts a
     metric-matched fallback second (fonts.css) so the swap does not reflow,
     and the display stack names Plex Sans before the system faces because
     Sora has no rupee glyph. */
  --font-display: 'Sora', 'Sora Fallback', 'IBM Plex Sans', 'IBM Plex Sans Fallback', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-eyebrow: 0.6875rem;   /* 11px, uppercase, tracked */
  --text-xs: 0.75rem;          /* 12 */
  --text-sm: 0.8125rem;        /* 13 */
  --text-base: 0.9375rem;      /* 15 */
  --text-md: 1.0625rem;        /* 17 */
  --text-lg: 1.1875rem;        /* 19 */
  --text-h4: 1.375rem;         /* 22 */
  --text-h3: 1.75rem;          /* 28 */
  --text-h2: 2.375rem;         /* 38 */
  --text-h1: 3.25rem;          /* 52 */
  --text-hero: 4rem;           /* 64 */
  --text-mega: 5rem;           /* 80 */

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-mega: -0.035em;
  --tracking-display: -0.025em;
  --tracking-tight: -0.012em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --measure-prose: 64ch;
  --measure-lede: 46ch;
  --measure-headline: 18ch;

  /* Site scale names, re-pointed onto the Forge steps (body is 15px). */
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-md);
  --font-size-xl: var(--text-lg);
  --font-size-2xl: var(--text-h4);
  --font-size-3xl: var(--text-h3);
  --font-size-4xl: var(--text-h2);
  --font-size-5xl: var(--text-h1);
  /* Compact "studio" sizes between -xs and -sm (Aug 2026 token audit): kept
     as measured, they are not on either scale. */
  --font-size-68: 0.68rem;
  --font-size-70: 0.7rem;
  --font-size-72: 0.72rem;
  --font-size-78: 0.78rem;
  --font-size-80: 0.8rem;
  --font-size-8125: 0.8125rem;
  --font-size-82: 0.82rem;
  --font-size-85: 0.85rem;
  --font-size-90: 0.9rem;
  --font-size-92: 0.92rem;
  --font-size-95: 0.95rem;
  --line-height-tight: var(--leading-snug);
  --line-height-normal: var(--leading-normal);
  --line-height-relaxed: var(--leading-relaxed);

  /* ---- Spacing ------------------------------------------------------------
     --space-N is always N x 4px here, which is also Forge's 4px base. Forge
     numbers its steps differently (its space-7 is 32px, space-8 40px), so the
     site keeps its own names: Forge 32/40/48/64/80/96 are --space-8, -10,
     -12, -16, -20 and --section-y. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  /* Denser toolbar scale the studio UIs converged on (Aug 2026 audit). */
  --space-tight-15: 0.15rem;
  --space-tight-20: 0.2rem;
  --space-tight-35: 0.35rem;
  --space-tight-45: 0.45rem;
  --space-tight-55: 0.55rem;
  --space-tight-65: 0.65rem;
  --space-tight-85: 0.85rem;

  --section-y: 6rem;          /* 96px, one band per idea */
  --section-y-tight: 4rem;    /* 64px */
  --card-pad: 1.5rem;         /* 24px */
  --card-pad-lg: 2rem;        /* 32px, panels */
  --control-pad-x: 1.125rem;  /* 18px */
  --control-h-sm: 2.125rem;   /* 34px */
  --control-h-md: 2.5rem;     /* 40px */
  --control-h-lg: 3.125rem;   /* 50px */

  /* ---- Layout ------------------------------------------------------------- */
  --container-max: 1160px;
  --container-narrow: 720px;
  --gutter-inline: 1.5rem;

  /* Minimum empty margin either side of page content, so no layout can run
     edge to edge and there is somewhere to put a vertical ad rail later.
     Zero below 768px on purpose: phone screens have no space to give away,
     and .container's own padding already keeps text off the edge there.
     Consumed via max-width: min(<tier>, calc(100% - 2 * var(--page-gutter)))
     rather than as padding, because padding sits INSIDE max-width and would
     shrink the content instead of the margin. */
  --page-gutter: 0rem;
  --sidebar-width: 300px;
  --header-height: 64px;

  /* ---- Radii: pills for actions, square-ish surfaces ---------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-control: var(--radius-pill);   /* buttons, chips */
  --radius-field: var(--radius-md);       /* inputs, selects, icon buttons */
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);
  --radius-media: var(--radius-lg);
  /* site names */
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);
  --border-radius-full: var(--radius-pill);
  --border-radius-3: 3px;
  --border-radius-4: var(--radius-xs);
  --border-radius-10: var(--radius-md);
  --border-radius-14: var(--radius-lg);

  /* ---- Motion: functional, short, never decorative ------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --dur-reveal: 600ms;
  --transition-control: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  --lift-hover: translateY(-1px);
  --press-scale: scale(0.985);
  /* site names */
  --transition-fast: var(--dur-fast) var(--ease-out);
  --transition-base: var(--dur-base) var(--ease-out);
  --transition-slow: var(--dur-slow) var(--ease-out);

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
}

/* =============================================================================
   DARK THEME
   Forge ships only a partial "inverse" theme (it leaves brand-soft panels,
   zebra rows and secondary buttons light, so white text lands on a pale
   ground). This is the complete dark palette built from the same ramps, with
   every text pair checked for AA:
     body ink-300 on ink-950 11.42:1, muted ink-400 on ink-900 6.56:1,
     link cobalt-300 on ink-900 8.53:1, on cobalt-950 7.93:1.
   ============================================================================= */
[data-theme="dark"] {
  --text-strong: var(--ink-050);
  --text-body: var(--ink-300);
  --text-muted: var(--ink-400);
  --text-subtle: var(--ink-400);
  --text-link: var(--cobalt-300);
  --text-link-hover: var(--cobalt-200);
  --text-highlight: var(--cobalt-300);

  --surface-page: var(--ink-950);
  --surface-band: var(--ink-925);
  --surface-band-warm: var(--ink-925);
  --surface-card: var(--ink-900);
  --surface-sunken: var(--ink-800);
  --surface-inverse: #07090c;
  --surface-brand-soft: var(--cobalt-950);
  --surface-accent-soft: var(--amber-950);

  --border-hairline: var(--ink-700);
  --border-strong: var(--ink-600);
  --border-brand: var(--cobalt-700);
  --focus-ring: var(--cobalt-300);

  --action-primary-hover: var(--cobalt-400);
  --action-primary-press: var(--cobalt-600);
  --action-neutral: var(--ink-050);
  --action-neutral-hover: var(--ink-200);
  --action-neutral-text: var(--ink-950);
  --action-ghost-hover: var(--ink-800);

  --status-success: var(--mint-500);
  --status-success-text: var(--mint-500);
  --status-success-soft: var(--mint-950);
  --status-warning: var(--amber-400);
  --status-warning-text: var(--amber-400);
  --status-warning-soft: var(--amber-950);
  --status-danger: var(--coral-400);
  --status-danger-text: var(--coral-400);
  --status-danger-soft: var(--coral-950);
  --status-info: var(--cobalt-300);
  --status-info-text: var(--cobalt-300);
  --status-info-soft: var(--cobalt-950);

  /* The --color-slate-* / --color-gray-* primitives are deliberately NOT
     flipped here: the studios use slate-900 as a code-block background and
     slate-50/100/200 as text on it, so flipping them would put dark text on a
     dark panel. The per-rule overrides at the end of components.css handle
     those surfaces. */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  --shadow-lifted: 0 8px 16px rgba(0, 0, 0, 0.4), 0 28px 56px -20px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 8px 20px -8px rgba(43, 85, 245, 0.55);
  --ring-focus: 0 0 0 3px rgba(91, 124, 251, 0.35), 0 0 0 1px var(--focus-ring);
}

/* Page gutter scale. Kept here with the token rather than in responsive.css
   so the whole thing is readable in one place.

   The desktop range is a linear ramp, not a set of steps, and that matters:
   with steps, crossing a breakpoint widened the gutter faster than the
   viewport grew, so the tool got NARROWER as the window got wider (measured
   1536px viewport -> 1281px of content, 1600px viewport -> 1185px). The ramp
   is monotonic by construction, since content works out as
   0.46 * viewport + 520px.

   Anchors: 64px at 1200px, 260px (the cap) at roughly 1926px.
     1200 ->  64    1440 -> 129    1600 -> 172    1920 -> 258    2560 -> 260 */
@media (min-width: 768px)  { :root { --page-gutter: 1.5rem; } }
@media (min-width: 1200px) {
  :root { --page-gutter: clamp(4rem, calc(27vw - 260px), 16.25rem); }
}