/* ============================================================================
   Compatibility alias layer
   ----------------------------------------------------------------------------
   The canonical tokens now live in css/tokens.css. This file maps the older
   token names onto them, so the ~8600 existing var() call sites across ~63
   files keep resolving while inheriting the new palette.

   These are aliases, NOT a second palette: every value below is a var()
   reference. Never put a literal colour here — it belongs in tokens.css.

   Dark mode needs no duplication: custom properties resolve at use time, so
   when tokens.css redefines --ink-900 for the dark scheme, --text-primary
   follows automatically.

   New code should use the tokens.css names directly. This layer exists to make
   the migration incremental and is expected to shrink over time.
   ============================================================================ */

:root {
    /* Typography */
    --font-sans: var(--font-body);

    /* Radius */
    --radius: var(--r-sm);
    --radius-lg: var(--r-md);
    --radius-pill: var(--r-pill);

    /* Surfaces. Note the numbering is inverted between the two systems:
       here --surface-2 is the white card, in tokens.css that is --surface. */
    --surface-0: var(--bg);             /* app background */
    --surface-1: var(--surface-subtle); /* subtle panels, sidebars, track fills */
    --surface-2: var(--surface);        /* cards, navbar, raised surfaces */

    /* Borders */
    --border: var(--line);
    --border-strong: var(--ink-300);

    /* Text */
    --text-primary: var(--ink-900);
    --text-secondary: var(--ink-500);
    --text-muted: var(--ink-400);

    /* Brand */
    --brand-primary: var(--brand-600);
    --brand-primary-strong: var(--brand-700);
    --brand-secondary: var(--brand-400);
    --brand-purple-tint: var(--brand-50);
    --brand-purple-mid: var(--brand-300);
    --brand-purple-deep: var(--brand-800);
    --on-brand: #fff;

    /* Accents */
    --accent-teal: var(--sage-500);
    --accent-teal-bg: var(--sage-100);
    --accent-teal-text: var(--sage-700);
    --accent-teal-mid: var(--sage-300);
    --accent-warm: var(--gold-500);
    --accent-warm-bg: var(--warn-bg);
    --accent-warm-text: var(--warn);
    --accent-peach-bg: var(--peach-bg);
    --accent-peach-text: var(--peach-text);
    --accent-danger-bg: var(--danger-bg);
    --accent-danger-text: var(--danger);

    /* Focus ring */
    --focus-ring: var(--focus);
}

/* --- Narrow overrides to contain Bootstrap/MudBlazor global bleed ---------- */

html, body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

h1, h2, h3, .sw-display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.01em;
}

/* The shared primitives (.sw-btn, .sw-chip, .sw-eyebrow, …) moved to
   css/components.css so each has exactly one definition. */