/* ---------------------------------------------------------------------------
 * Design tokens — the single source for fonts, type scale and colour.
 *
 * This lives in its own file for one reason: Tailwind only picks up `@theme`
 * from an UNLAYERED import. Consumers that pull the component styles in with
 * `@import "@rebasepro/ui/index.css" layer(base)` — which the marketing site
 * and the docs both do, to keep component CSS below their own utilities — get
 * the layer wrapped around everything transitively, and the theme silently
 * does not register. That is why the font stacks used to be copy-pasted into
 * every consumer's own `@theme`.
 *
 * Import this file unlayered, alongside the layered index.css:
 *
 *     @import "@rebasepro/ui/theme.css";
 *     @import "@rebasepro/ui/index.css" layer(base);
 * ------------------------------------------------------------------------- */

@theme {
    /* Font Families — Instrument Sans for headings, Inter for UI and body copy. */
    --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, 'Helvetica', 'Arial', sans-serif;
    --font-headers: 'Instrument Sans Variable', 'Instrument Sans', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;

    /* Type scale — three tiers keyed to RENDERED SIZE, not tag depth.
       Tailwind turns each into a `tracking-*` utility, so the admin panel, the
       console and the marketing site all spell the same intent the same way
       instead of each hardcoding its own em value. Pair display/title with
       font-semibold and heading with font-medium. */
    --tracking-display: -0.022em; /* >= 30px — the headline tier; matches the marketing site */
    --tracking-title: -0.018em;   /* 20-24px — section titles */
    --tracking-heading: -0.01em;  /* <= 18px — labels; still a heading, not a headline */

    /* Sub-`xs` type. These exist because the marketing site had ~450
       hand-written `text-[10px]` / `text-[11px]` classes: the tier was real, it
       just wasn't in the system, so every page improvised it.

       In product UI there is exactly ONE sanctioned use — `typography-micro`,
       the uppercase field label above a value — and it earns the exception by
       never carrying a sentence. Everything a person actually *reads* stays at
       `text-xs` (12px) or above. `--text-3xs` remains marketing-only. */
    --text-2xs: 11px;
    --text-2xs--line-height: 1.45;
    --text-3xs: 10px;
    --text-3xs--line-height: 1.4;

    /* Control heights — the one scale every inline control resolves to, so a
       Button, TextField and Select at the same size share a baseline. Mirrors
       CONTROL_HEIGHT in styles.ts; that is the source for React components,
       these are for everyone else.

       Marketing pages and docs are plain markup and cannot import a JS mixin,
       so without these they hand-roll their own paddings and drift: the site's
       two hero CTAs sat at 52px and 54px, on no scale and not even matching
       each other. Reach for `min-h-(--control-xl)` instead of a magic number. */
    --control-smallest: 28px;
    --control-small: 32px;
    --control-medium: 40px;
    --control-large: 48px;
    --control-xl: 56px;   /* buttons only */
    --control-2xl: 64px;  /* buttons only */

    /* Colors */
    --color-primary: #0070F4;
    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
    /* rose-600. #FF5B79 was only 2.99:1 against white, so white text on it
       and it as text both failed WCAG AA. Same hue family, 4.70:1. */
    --color-secondary: #E11D48;
    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);

    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);

    /* Field Colors */
    --color-field-disabled: rgb(224 224 226);
    --color-field-disabled-dark: rgb(35 35 37);

    /* Text Colors — using opaque values so icon strokes render solidly */
    --color-text-primary: #212121;
    --color-text-secondary: #757575;
    --color-text-disabled: #9e9e9e;
    --color-text-primary-dark: #ffffff;
    --color-text-secondary-dark: #a0a0a9;
    --color-text-disabled-dark: #757580;

    /* Surface Colors */
    --color-surface-50: #fafafa;
    --color-surface-100: #f5f5f5;
    --color-surface-200: #e5e5e5;
    --color-surface-300: #d4d4d4;
    --color-surface-400: #a3a3a3;
    /* Muted text: captions, nav descriptions, table headers, eyebrows.
       #737373 was tuned for light and measured 4.74:1 on white but only
       4.43:1 on #000 and 4.18:1 on #0a0a0a, so every dark surface — the
       marketing site, the console, the admin panel in dark mode — carried a
       muted tier below AA. #797979 is the balance point: it is the single
       value where the white and #111111 curves cross, at 4.35:1 on each,
       and it clears 4.5:1 outright on the two backgrounds that carry most of
       this token (4.82:1 on #000, 4.55:1 on #0a0a0a). */
    --color-surface-500: #797979;
    --color-surface-600: #404040;
    --color-surface-700: #262626;
    --color-surface-800: #111111;
    --color-surface-900: #0a0a0a;
    --color-surface-950: #000000;

    /* Surface Accent Colors */
    --color-surface-accent-50: #f8fafc;
    --color-surface-accent-100: #f1f5f9;
    --color-surface-accent-200: #e2e8f0;
    --color-surface-accent-300: #cbd5e1;
    --color-surface-accent-400: #94a3b8;
    --color-surface-accent-500: #64748b;
    --color-surface-accent-600: #475569;
    --color-surface-accent-700: #334155;
    --color-surface-accent-800: #1e293b;
    --color-surface-accent-900: #172033;
    --color-surface-accent-950: #0f172a;
}