/* Primitive tokens — raw values only.
   Components must NEVER read these directly; they are consumed only by
   the semantic layer (app-semantic.css) or by host brand overrides. */

@layer tokens {
    :root {
        /* ── Neutral scale ──────────────────────────────────────────────
     A balanced, hue-free gray. Deliberately neutral so hosts can
     re-bind semantic tokens to any brand palette without conflict.
     Steps follow the 50/100/200/300/500/700/800/900/950 convention. */
        --op-neutral-50: #fafafa;
        --op-neutral-100: #f4f4f5;
        --op-neutral-200: #e4e4e7;
        --op-neutral-300: #d4d4d8;
        --op-neutral-500: #71717a;
        --op-neutral-700: #3f3f46;
        --op-neutral-800: #27272a;
        --op-neutral-900: #18181b;
        --op-neutral-950: #09090b;
        /* ── Amber scale ────────────────────────────────────────────────
     Utility hue, not a brand colour. Drives the semantic --color-warn
     family — used for "please confirm", flagged-field outlines,
     warning callouts. Hosts can override these primitives or rebind
     the warn semantic tokens directly if the default amber clashes.
     Same 50/100/200/300/500/700/800/900/950 step convention. */
        --op-amber-50: #fffbeb;
        --op-amber-100: #fef3c7;
        --op-amber-200: #fde68a;
        --op-amber-300: #fcd34d;
        --op-amber-500: #f59e0b;
        --op-amber-700: #b45309;
        --op-amber-800: #92400e;
        --op-amber-900: #78350f;
        --op-amber-950: #451a03;
        /* ── Red scale ──────────────────────────────────────────────────
     Utility hue. Drives the semantic --color-error family — used for
     form-level validation errors, destructive-action affordances, and
     anywhere "this went wrong" needs to register at a glance. Distinct
     from amber/warn (which is "please confirm" softer caution).
     Same 50/100/200/300/500/700/800/900/950 step convention. */
        --op-red-50:  #fef2f2;
        --op-red-100: #fee2e2;
        --op-red-200: #fecaca;
        --op-red-300: #fca5a5;
        --op-red-500: #ef4444;
        --op-red-700: #b91c1c;
        --op-red-800: #991b1b;
        --op-red-900: #7f1d1d;
        --op-red-950: #450a0a;
        /* ── Blue scale ─────────────────────────────────────────────────
     Utility hue. Drives the semantic --color-info family — used for
     informational notices, "heads up" banners, pre-fill confirmations,
     and any "this is just to let you know" callout. Distinct from
     warn/amber (caution) and error/red (something went wrong).
     Same 50/100/200/300/500/700/800/900/950 step convention. */
        --op-blue-50:  #eff6ff;
        --op-blue-100: #dbeafe;
        --op-blue-200: #bfdbfe;
        --op-blue-300: #93c5fd;
        --op-blue-500: #3b82f6;
        --op-blue-700: #1d4ed8;
        --op-blue-800: #1e40af;
        --op-blue-900: #1e3a8a;
        --op-blue-950: #172554;
        /* ── Font stacks ────────────────────────────────────────────────
     System stacks only. No webfont loading in the RCL — hosts that
     want Fraunces / Inter / etc. load them in their own layout and
     rebind the semantic --font-* tokens. */
        --op-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --op-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
}