/* ============================================================
   Fabric Console — brand token foundation
   Source of truth: docs/control-plane-operator/console-refresh/brand-tokens.md
   The official Ember Consult "Colour Scheme": Pink is the SIGNATURE strand
   (lead/accent), Plum and Purple support it. (The previous version of this file
   tokenised a marketing agency's unadopted violet "Blue Accent" proposal.)

   Load order matters: tokens.css MUST come before app.css so the legacy
   design-system variables in app.css resolve against these aliases.

   Components reference ONLY the semantic aliases (--accent, --surface-card,
   --text-body, --status-*). The raw ramps exist for deliberate brand moments.

   Contrast law (see the doc): the signature pink #D460A0 is a FILL colour —
   it fails AA for normal text on white (~3.3:1). Text/link/icon on light uses
   Pink 800 #B9347D, which clears 4.5:1 on every light surface including the
   sunken zebra. Dark mode lightens to the #DF88B8 family.
   ============================================================ */

/* ---------- self-hosted webfonts ----------
   No CDN in this environment: the binaries live in wwwroot/fonts/ and are
   committed to the repo. `local()` is tried first so a system copy is reused
   when present. Do not re-add a Google Fonts <link>. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local('Inter'),
         local('Inter Variable'),
         url('../fonts/inter-variable-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: local('JetBrains Mono'),
         url('../fonts/jetbrains-mono-variable-latin.woff2') format('woff2');
}

:root {
    /* ---------- strands (300/500/700 official; 50/100/800/900 derived) ---------- */
    /* Pink — SIGNATURE */
    --ember-pink-50:#FBF2F7;    --ember-pink-100:#F2CFE2;   --ember-pink-300:#DF88B8;
    --ember-pink-500:#D460A0;   --ember-pink-700:#C93888;   --ember-pink-800:#B9347D;
    --ember-pink-900:#A12D6D;
    /* Plum — supporting */
    --ember-plum-50:#F7EDF6;    --ember-plum-100:#E4BCDD;   --ember-plum-300:#BC58AB;
    --ember-plum-500:#A14090;   --ember-plum-700:#8F3980;   --ember-plum-800:#843476;
    --ember-plum-900:#722E66;
    /* Purple — supporting */
    --ember-purple-50:#F4EBF6;  --ember-purple-100:#D5B2DF; --ember-purple-200:#A65DBC;
    --ember-purple-300:#9741B1; --ember-purple-500:#77338C; --ember-purple-700:#672C79;
    --ember-purple-800:#5F286F; --ember-purple-900:#522361;

    /* ---------- neutrals (official) ---------- */
    --ember-white-100:#FEFEFE;    --ember-white-200:#FBFBFB;    --ember-white-300:#F7F7F7;
    --ember-silver-100:#F9F9F9;   --ember-silver-200:#E3E3E3;   --ember-silver-300:#D5D5D5;
    --ember-steel-100:#F9FCFF;    --ember-steel-300:#DEE4EA;
    --ember-charcoal-100:#3D3D3D; --ember-charcoal-200:#292929; --ember-charcoal-300:#141414;
    /* derived muted inks (see Derivations) */
    --ember-grey-400:#A2969E;     --ember-grey-600:#6B6169;

    /* ---------- semantics (status pills use ONLY these) ---------- */
    --status-ok:#16A34A; --status-warn:#EAB308; --status-error:#DC2626; --status-info:#2563EB;

    /* ---------- gradient (brand moments only, never data surfaces) ----------
       Pink → Plum → Purple, signature-first. The reverse direction
       (Purple → Plum → Pink) is equally official and is what app.css's 135deg
       hero washes render. */
    --ember-gradient:linear-gradient(90deg,#D460A0,#A14090,#77338C);

    /* ---------- typography ---------- */
    --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* ---------- motion (expressive; respects prefers-reduced-motion below) ---------- */
    --dur-fast:120ms;
    --dur-base:220ms;
    --dur-panel:320ms;
    --ease-spring:cubic-bezier(.22,1.4,.36,1);
    --ease-out:cubic-bezier(.22,.9,.3,1);

    /* ---------- light theme semantic aliases ---------- */
    --surface-page:var(--ember-steel-100);
    --surface-card:#F7F5F7;            /* White 300 warmed toward Pink — mid plane */
    --surface-raised:var(--ember-white-100);  /* popovers, menus, cards, inputs */
    --surface-sunken:#F2EDF1;          /* wells, inset facts, table zebra */
    --surface-hover:#F8F1F6;           /* row/control hover above a raised surface */
    --border:var(--ember-silver-200);
    --border-soft:#EDEAEC;
    --border-strong:#D0CACE;           /* hovered / emphasised control edge */
    --text-primary:var(--ember-charcoal-200);
    --text-body:var(--ember-charcoal-100);
    --text-secondary:var(--ember-grey-600);   /* 5.9:1 raised / 5.1:1 sunken */
    --text-faint:#8A838E;                     /* non-text only: 3.7:1 raised / 3.2:1 sunken */
    --ring-track:var(--border-soft);          /* unfilled arc of a capacity ring / bar */
    /* capacity arc — the ONE sanctioned brand ramp on a data surface (the pod
       ring and the strip load bar). Every point along the arc must clear the
       ≥3:1 non-text floor on --surface-raised, so the ramp is theme-aware:
       light darkens toward Purple, dark lightens toward the 300/200 steps.
       Light worst point 3.48:1 (Pink 500); see brand-tokens Derivations. */
    --load-arc-from:var(--ember-pink-500);
    --load-arc-to:var(--ember-plum-500);
    --load-arc-idle:var(--ember-purple-500);   /* full sweep when no load is reported */
    --accent:var(--ember-pink-800);           /* AA as text AND behind white */
    --accent-strong:var(--ember-pink-900);
    --accent-soft:var(--ember-pink-50);
    --accent-contrast:#FFFFFF;         /* text on an --accent fill (5.4:1) */
    /* text on the Ember gradient / brand mark — the gradient is identical in
       both themes, so this one alias is deliberately theme-invariant */
    --text-on-brand:#FFFFFF;

    /* code / terminal surface — deliberately dark in BOTH themes */
    --code-bg:var(--ember-charcoal-200);
    --code-text:#D4CCD1;

    /* status tints (derived, theme-aware backgrounds for pills/banners) */
    --status-ok-soft:#E4F2E9;
    --status-warn-soft:#F9F1D9;
    --status-error-soft:#F8E6E6;
    --status-info-soft:#E6ECF9;
    --status-off:var(--ember-grey-600);
    --status-off-soft:#E7E5E7;

    /* status ink — AA-safe text/icon colour on the matching -soft background */
    --status-ok-ink:#166534;
    --status-warn-ink:#8A6508;
    --status-error-ink:#991B1B;
    --status-info-ink:#174A98;
    --status-off-ink:var(--ember-grey-600);   /* 4.8:1 on --status-off-soft */

    /* the resting mark in an inline data strip (sparkline / pulse bars) — brand-tinted
       history that still clears 3:1 against a card. The emphasised mark uses the Ember
       gradient or a status ink directly. */
    --data-mark-quiet:color-mix(in srgb, var(--ember-pink-700) 58%, var(--border-strong));

    /* delivery-history data marks (heat tiles, gantt bars). Reserved for delivery
       visualisations — never for chrome. Aliases, not new colours: the "strong"
       weight rides the status INK so it steps the right way in each theme (deeper
       on light, brighter on dark). Light: ok 3.27:1, strong 7.07:1, err 4.79:1 on
       --surface-raised. --heat-idle is an empty *track*, so the hairline
       convention exempts it from the 3:1 floor. */
    --heat-ok:var(--status-ok);
    --heat-ok-strong:var(--status-ok-ink);
    --heat-err:var(--status-error);
    --heat-idle:var(--border);

    /* chrome (topbar / brand frame — deliberately dark in both themes) */
    --chrome-bg:var(--ember-charcoal-200);
    --chrome-text:var(--ember-white-300);
    --chrome-muted:#ABA0A7;
    --chrome-hairline:rgba(255,255,255,.12);
    --chrome-hover:rgba(255,255,255,.09);

    --radius:10px;
    --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent);
    --shadow:0 1px 2px rgba(41,29,37,.05), 0 2px 8px rgba(41,29,37,.05);
    --shadow-pop:0 4px 10px rgba(41,29,37,.08), 0 12px 32px rgba(41,29,37,.14);
    /* the lift under a hovered tile/row — a long, soft Plum 900 bloom rather
       than a grey drop, so the hover reads as brand warmth */
    --shadow-hover:0 18px 44px -30px rgba(114,46,102,.4);
}

[data-theme="dark"] {
    --surface-page:var(--ember-charcoal-300);
    --surface-card:#1E1B1E;
    --surface-raised:#262326;
    --surface-sunken:#191719;
    --surface-hover:#322E32;
    --border:#353135;
    --border-soft:#272427;
    --border-strong:#4A454A;
    --text-primary:var(--ember-white-200);
    --text-body:#D4CCD1;
    --text-secondary:var(--ember-grey-400);   /* 5.5:1 raised / 6.3:1 sunken */
    --text-faint:#7A7280;                     /* non-text only: 3.4:1 raised / 4.0:1 card */
    --ring-track:var(--border);
    /* Plum 500 measures 2.70:1 and Purple 500 1.95:1 on --surface-raised, so the
       light ramp's tail is invisible on Charcoal. Stepping the tail up to Plum
       300 / Purple 200 puts the arc's darkest point at 3.79:1 (bar) and 3.61:1
       (idle sweep). Pink 500 already clears at 4.43:1 and stays the start. */
    --load-arc-to:var(--ember-plum-300);
    --load-arc-idle:var(--ember-purple-200);
    --accent:var(--ember-pink-300);
    --accent-strong:var(--ember-pink-100);
    --accent-soft:#3C1129;
    --accent-contrast:#2A0C1D;

    --code-bg:#0E0D0E;
    --code-text:#D4CCD1;

    --status-ok-soft:#14281C;
    --status-warn-soft:#322A12;
    --status-error-soft:#301717;
    --status-info-soft:#161F32;
    --status-off-soft:#282627;

    --status-ok-ink:#4ADE80;
    --status-warn-ink:#FACC15;
    --status-error-ink:#F87171;
    --status-info-ink:#93B4FC;
    --status-off-ink:var(--ember-grey-400);   /* 5.5:1 on --status-off-soft */
    --data-mark-quiet:color-mix(in srgb, var(--ember-pink-300) 62%, var(--border-strong));

    /* delivery-history marks — same aliases, and the ink lightens on Charcoal, so
       "strong" reads brighter rather than deeper. Dark: ok 4.72:1, strong 8.92:1,
       err 5.62:1 on --surface-raised. */
    --heat-ok:var(--status-ok);
    --heat-ok-strong:var(--status-ok-ink);
    --heat-err:var(--status-error-ink);
    --heat-idle:var(--border);

    --chrome-bg:#1B181B;
    --chrome-text:#EDEAEC;
    --chrome-muted:#ABA0A7;
    --chrome-hairline:rgba(255,255,255,.10);
    --chrome-hover:rgba(255,255,255,.07);

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.34);
    --shadow-pop:0 4px 10px rgba(0,0,0,.44), 0 12px 32px rgba(0,0,0,.5);
    --shadow-hover:0 18px 44px -30px rgba(0,0,0,.75);
}

/* ============================================================
   Legacy bridge — the pre-refresh design system in app.css is expressed in
   these variable names. Re-pointing them at the semantic aliases makes every
   page that has not been re-tiered yet inherit both themes for free.
   New/refreshed markup must NOT use these names; use the aliases above.

   The second block re-points the names the *previous* (agency-palette) token
   file introduced — app.css still spells its hero gradients in violet/magenta.
   Mapping violet→Purple and magenta→Plum turns those washes into the official
   Purple → Plum → Pink gradient with no page edits.
   ============================================================ */
:root {
    --ember:var(--accent);
    --ember-soft:var(--accent-soft);
    --ember-dark:var(--accent-strong);
    --ember-plum:var(--ember-plum-700);
    --ember-plum-dark:var(--ember-plum-900);
    --ember-purple:var(--ember-purple-800);
    --ember-purple-dark:var(--ember-purple-900);

    /* agency-era ramp names, remapped onto the official strands */
    --ember-violet-500:var(--ember-purple-500);
    --ember-violet-700:var(--ember-purple-700);
    --ember-magenta-500:var(--ember-plum-500);
    --ember-void:var(--ember-charcoal-300);

    --ink:var(--text-primary);
    --ink-2:var(--text-body);
    --ink-3:var(--text-secondary);
    --line:var(--border);
    --line-soft:var(--border-soft);
    --bg:var(--surface-page);
    --card:var(--surface-raised);

    --green:var(--status-ok);       --green-soft:var(--status-ok-soft);
    --amber:var(--status-warn);     --amber-soft:var(--status-warn-soft);
    --red:var(--status-error);      --red-soft:var(--status-error-soft);
    --blue:var(--status-info);      --blue-soft:var(--status-info-soft);
    --grey-soft:var(--status-off-soft);
}

[data-theme="dark"] {
    /* dark mode wants the deep-plum wash to stay legible under 600-weight text */
    --ember-plum-dark:var(--ember-plum-100);
    --ember-purple-dark:var(--ember-purple-100);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast:0ms;
        --dur-base:0ms;
        --dur-panel:0ms;
        --ease-spring:linear;
        --ease-out:linear;
    }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}