/* Magogi design tokens
 * Reconciled to the Magogi Brand Book — see
 * mgf-brand/brand/MAGOGI_BRAND_BOOK.md (Part V — Colour, Part VI — Typography).
 * Ported verbatim from mgf-website's global.css (the canonical implementation)
 * so every MGF surface composes from the SAME token set and reads identical.
 *
 * The --mgf-* values are the source of truth; the semantic --color-* tokens
 * compose from them. The *-tint / *-shade pair flips lightness between themes:
 * *-tint is always the subtle surface near the background, *-shade / *-strong
 * the readable emphasis foreground — so chips and accents stay legible in both.
 *
 * KIT-READY: part of the self-contained brand layer (tokens/base/components/
 * fonts) designed to lift wholesale into a shared mgf-brand-web package.
 */
:root {
  /* Brand palette (source of truth) */
  --mgf-indigo: #1e2a4a;
  --mgf-gold: #f2a93b;
  --mgf-teal: #2bb7a3;
  --mgf-ink: #11151f;
  --mgf-slate: #5b6678;
  --mgf-mist: #e9ecf2;
  --mgf-paper: #fbfbfd;
  --mgf-error: #e5484d;
  --mgf-warning: #e8a317;
  --mgf-info: #3e63dd;
  /* Operator-instrument functional hues (added 0.2.0, see instruments.css).
   * Blue = "busy / running", violet = "derived / authority". FUNCTIONAL ONLY —
   * gold stays the single affirmative-action accent (one flame per view); blue
   * is the running-state colour and is NEVER a call-to-action. */
  --mgf-busy: #2e86c8;
  --mgf-derived: #7e5bb0;

  /* Primary — Magogi Indigo */
  --color-primary: var(--mgf-indigo);
  --color-primary-tint: color-mix(in srgb, var(--mgf-indigo) 10%, white);
  --color-primary-shade: color-mix(in srgb, var(--mgf-indigo) 80%, black);

  /* Links — Federation Teal (Brand Book Part VIII). Darkened so body links meet
   * WCAG AA on Paper (≈5.4:1); pure teal is too light for text. */
  --color-link: color-mix(in srgb, var(--mgf-teal) 64%, black);
  --color-link-hover: color-mix(in srgb, var(--mgf-teal) 50%, black);

  /* Signature accent — Keystone Gold (one CTA/accent per view, never body text) */
  --color-accent: var(--mgf-gold);
  --color-accent-tint: color-mix(in srgb, var(--mgf-gold) 22%, white);
  /* -strong is gold used as readable text/indicator; darkened so it clears WCAG
   * AA (≈4.9:1) on the pale hero/badge tints. */
  --color-accent-strong: color-mix(in srgb, var(--mgf-gold) 55%, black);

  /* Semantic status fills (success = teal, the brand's "connection/open" hue) */
  --color-success: var(--mgf-teal);
  --color-success-tint: color-mix(in srgb, var(--mgf-teal) 18%, white);
  --color-success-text: color-mix(in srgb, var(--mgf-teal) 64%, black);
  --color-warning-tint: color-mix(in srgb, var(--mgf-warning) 22%, white);
  --color-warning-text: color-mix(in srgb, var(--mgf-warning) 62%, black);
  --color-info-tint: color-mix(in srgb, var(--mgf-info) 16%, white);
  --color-info-text: color-mix(in srgb, var(--mgf-info) 72%, black);

  /* Functional states for the operator-instrument layer (instruments.css):
   * "busy / running" (blue) and "derived / authority" (violet). Same -tint /
   * -text shape as the status fills above so chips, indicators and markers stay
   * legible and flip correctly in dark mode. */
  --state-busy: var(--mgf-busy);
  --state-busy-tint: color-mix(in srgb, var(--mgf-busy) 14%, white);
  --state-busy-text: color-mix(in srgb, var(--mgf-busy) 72%, black);
  --state-derived: var(--mgf-derived);
  --state-derived-tint: color-mix(in srgb, var(--mgf-derived) 16%, white);
  --state-derived-text: color-mix(in srgb, var(--mgf-derived) 66%, black);

  /* Neutrals & semantic */
  --color-text: var(--mgf-ink);
  --color-text-muted: var(--mgf-slate);
  --color-bg: var(--mgf-paper);
  --color-bg-soft: color-mix(in srgb, var(--mgf-mist) 55%, var(--mgf-paper));
  --color-border: var(--mgf-mist); /* subtle dividers/cards (decorative) */
  /* Stronger border for UI components that must be identifiable (form inputs):
   * meets the 3:1 non-text contrast minimum (WCAG 1.4.11). */
  --color-border-strong: var(--mgf-slate);
  --color-error-tint: color-mix(in srgb, var(--mgf-error) 16%, white);
  --color-error-text: color-mix(in srgb, var(--mgf-error) 75%, black);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --content-max: 84rem;
  --content-prose: 42rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* Raised surface (cards over a band) + restrained elevation (round-3 UI).
   * Shadows are intentionally subtle — the brand reads calm, not glossy. */
  --color-surface-raised: #ffffff;
  --shadow-sm: 0 1px 2px rgb(17 21 31 / 0.08);
  --shadow-md: 0 12px 30px rgb(17 21 31 / 0.1);
  --motion-fast: 120ms;
  --motion-normal: 160ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme — Ink background, Mist text, gold/teal accents preserved.
     * tint becomes a subtle dark surface; shade/strong become light emphasis. */
    --color-primary-tint: color-mix(in srgb, var(--mgf-indigo) 32%, var(--mgf-ink));
    --color-primary-shade: color-mix(in srgb, var(--mgf-indigo) 35%, white);
    /* Teal links, lightened for AA on the Ink background (≈8.4:1). */
    --color-link: color-mix(in srgb, var(--mgf-teal) 85%, white);
    --color-link-hover: color-mix(in srgb, var(--mgf-teal) 78%, white);

    --color-accent-tint: color-mix(in srgb, var(--mgf-gold) 24%, var(--mgf-ink));
    --color-accent-strong: color-mix(in srgb, var(--mgf-gold) 82%, white);

    --color-success-tint: color-mix(in srgb, var(--mgf-teal) 26%, var(--mgf-ink));
    --color-success-text: color-mix(in srgb, var(--mgf-teal) 82%, white);
    --color-warning-tint: color-mix(in srgb, var(--mgf-warning) 26%, var(--mgf-ink));
    --color-warning-text: color-mix(in srgb, var(--mgf-warning) 82%, white);
    --color-info-tint: color-mix(in srgb, var(--mgf-info) 30%, var(--mgf-ink));
    --color-info-text: color-mix(in srgb, var(--mgf-info) 82%, white);

    /* Operator-instrument functional states — dark remaps (mirror the fills). */
    --state-busy-tint: color-mix(in srgb, var(--mgf-busy) 30%, var(--mgf-ink));
    --state-busy-text: color-mix(in srgb, var(--mgf-busy) 82%, white);
    --state-derived-tint: color-mix(in srgb, var(--mgf-derived) 30%, var(--mgf-ink));
    --state-derived-text: color-mix(in srgb, var(--mgf-derived) 82%, white);

    --color-text: var(--mgf-mist);
    --color-text-muted: color-mix(in srgb, var(--mgf-slate) 55%, white);
    --color-bg: var(--mgf-ink);
    --color-bg-soft: color-mix(in srgb, white 6%, var(--mgf-ink));
    --color-surface-raised: var(--mgf-indigo);
    --color-border: color-mix(in srgb, var(--mgf-slate) 45%, var(--mgf-ink));
    --color-border-strong: color-mix(in srgb, var(--mgf-slate) 35%, white);
    --color-error-tint: color-mix(in srgb, var(--mgf-error) 28%, var(--mgf-ink));
    --color-error-text: color-mix(in srgb, var(--mgf-error) 32%, white);
  }
}
