/* Magogi — global design tokens (site-ready)
 * ---------------------------------------------------------------------------
 * GENERATED by gen_tokens.py — edit design-tokens.json.
 * Source of truth: brand/assets/system/design-tokens.json — regenerate with
 *   python3 brand/build/gen_tokens.py      (verify: python3 brand/build/gen_tokens.py --check)
 * Drop-in token layer for foundation web surfaces (mgf-website and
 * friends): vendor this file verbatim (e.g. src/styles/) and import it
 * before your own styles. Identical token set to semantic.css — the
 * --mgf-* namespace is the only spelling of every token.
 * Load ../fonts/fonts.css (or your local copy) for the font families.
 */
/* ---- Raw palette + scales (theme-independent) ----
 * busy/derived are FUNCTIONAL hues (F1, founder-enacted 2026-07-04): blue =
 * busy/running/checking state, violet = derived/authority — NEVER a CTA,
 * never decoration; Keystone Gold stays the one affirmative accent.
 * Spacing is the quarter-rem scale: space-N = N x 0.25rem, contiguous 0..12
 * + extended stops 16/24 (canon change 2026-07-04 — adopted from the shipped
 * site scale). Motion patterns are named choreography (settle/prove/
 * draw/arrive — the law is Book Part VIIe), composable as `transition:
 * <prop> var(--mgf-motion-settle)`; honour prefers-reduced-motion —
 * strip movement, keep the state change. */
:root {
  --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;
  --mgf-busy: #2e86c8;
  --mgf-derived: #7e5bb0;
  --mgf-font-display: 'Space Grotesk','Century Gothic',ui-sans-serif,system-ui,sans-serif;
  --mgf-font-body: 'Inter',ui-sans-serif,system-ui,sans-serif;
  --mgf-font-mono: 'JetBrains Mono',ui-monospace,monospace;
  --mgf-font-weight-regular: 400;
  --mgf-font-weight-medium: 500;
  --mgf-font-weight-semibold: 600;
  --mgf-font-weight-bold: 700;
  --mgf-line-tight: 1.1;
  --mgf-line-normal: 1.5;
  --mgf-line-relaxed: 1.65;
  --mgf-text-xs: 0.75rem;
  --mgf-text-sm: 0.875rem;
  --mgf-text-base: 1rem;
  --mgf-text-md: 1.125rem;
  --mgf-text-lg: 1.25rem;
  --mgf-text-xl: 1.5rem;
  --mgf-text-2xl: 2rem;
  --mgf-text-3xl: 2.75rem;
  --mgf-text-4xl: 3.5rem;
  --mgf-space-0: 0;
  --mgf-space-1: 0.25rem;
  --mgf-space-2: 0.5rem;
  --mgf-space-3: 0.75rem;
  --mgf-space-4: 1rem;
  --mgf-space-5: 1.25rem;
  --mgf-space-6: 1.5rem;
  --mgf-space-7: 1.75rem;
  --mgf-space-8: 2rem;
  --mgf-space-9: 2.25rem;
  --mgf-space-10: 2.5rem;
  --mgf-space-11: 2.75rem;
  --mgf-space-12: 3rem;
  --mgf-space-16: 4rem;
  --mgf-space-24: 6rem;
  --mgf-radius-sm: 8px;
  --mgf-radius-md: 12px;
  --mgf-radius-lg: 16px;
  --mgf-radius-tile: 20px;
  --mgf-radius-pill: 999px;
  --mgf-shadow-sm: 0 1px 2px rgb(17 21 31 / 0.08);
  --mgf-shadow-md: 0 12px 30px rgb(17 21 31 / 0.1);
  --mgf-duration-fast: 120ms;
  --mgf-duration-normal: 180ms;
  --mgf-duration-slow: 260ms;
  --mgf-duration-stagger: 40ms;
  --mgf-duration-sweep: 640ms;
  --mgf-duration-heartbeat: 10s;
  --mgf-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mgf-ease-orbit: cubic-bezier(0.45, 0, 0.55, 1);
  --mgf-motion-settle: var(--mgf-duration-fast) var(--mgf-ease-standard);
  --mgf-motion-prove: var(--mgf-duration-normal) var(--mgf-ease-standard);
  --mgf-motion-draw: var(--mgf-duration-slow) var(--mgf-ease-standard);
  --mgf-motion-arrive: var(--mgf-duration-normal) var(--mgf-ease-standard);
  --mgf-breakpoint-sm: 40rem;
  --mgf-breakpoint-md: 52rem;
  --mgf-breakpoint-lg: 72rem;
  --mgf-breakpoint-xl: 90rem;
}

/* ---- Light theme (default) ----
 * Contrast is load-bearing (WCAG 2.2 AA): --mgf-color-link and the focus
 * ring are a *darkened* Teal — raw Teal fails 2.42:1 on Paper, Gold fails
 * 1.93:1 (F2: teal ring on light grounds, gold ring on dark grounds).
 * Status text on coloured fills: Ink on error/warning/success, Paper on
 * info and derived — the verified pairs in the Brand Book Part V table. */
:root,
[data-theme="light"] {
  --mgf-color-bg-canvas: var(--mgf-paper);
  --mgf-color-bg-surface: #ffffff;
  --mgf-color-bg-surface-raised: #ffffff;
  --mgf-color-bg-muted: var(--mgf-mist);
  --mgf-color-bg-inverse: var(--mgf-indigo);
  --mgf-color-text-primary: var(--mgf-ink);
  --mgf-color-text-secondary: var(--mgf-slate);
  --mgf-color-text-inverse: var(--mgf-paper);
  --mgf-color-text-accent: var(--mgf-indigo);
  --mgf-color-border-subtle: var(--mgf-mist);
  --mgf-color-border-strong: var(--mgf-slate);
  --mgf-color-link: color-mix(in srgb, var(--mgf-teal) 64%, black);
  --mgf-color-link-hover: color-mix(in srgb, var(--mgf-teal) 50%, black);
  --mgf-color-focus-ring: color-mix(in srgb, var(--mgf-teal) 64%, black);
  --mgf-color-action-primary-bg: var(--mgf-gold);
  --mgf-color-action-primary-text: var(--mgf-ink);
  --mgf-color-action-secondary-bg: transparent;
  --mgf-color-action-secondary-text: var(--mgf-ink);
  --mgf-color-action-secondary-border: currentColor;
  --mgf-color-status-error-bg: var(--mgf-error);
  --mgf-color-status-error-text: var(--mgf-ink);
  --mgf-color-status-error-tint: color-mix(in srgb, var(--mgf-error) 16%, white);
  --mgf-color-status-error-strong: color-mix(in srgb, var(--mgf-error) 75%, black);
  --mgf-color-status-warning-bg: var(--mgf-warning);
  --mgf-color-status-warning-text: var(--mgf-ink);
  --mgf-color-status-warning-tint: color-mix(in srgb, var(--mgf-warning) 22%, white);
  --mgf-color-status-warning-strong: color-mix(in srgb, var(--mgf-warning) 62%, black);
  --mgf-color-status-info-bg: var(--mgf-info);
  --mgf-color-status-info-text: var(--mgf-paper);
  --mgf-color-status-info-tint: color-mix(in srgb, var(--mgf-info) 16%, white);
  --mgf-color-status-info-strong: color-mix(in srgb, var(--mgf-info) 72%, black);
  --mgf-color-status-success-bg: var(--mgf-teal);
  --mgf-color-status-success-text: var(--mgf-ink);
  --mgf-color-status-success-tint: color-mix(in srgb, var(--mgf-teal) 18%, white);
  --mgf-color-status-success-strong: color-mix(in srgb, var(--mgf-teal) 64%, black);
  --mgf-color-state-busy: var(--mgf-busy);
  --mgf-color-state-busy-tint: color-mix(in srgb, var(--mgf-busy) 14%, white);
  --mgf-color-state-busy-strong: color-mix(in srgb, var(--mgf-busy) 72%, black);
  --mgf-color-state-derived: var(--mgf-derived);
  --mgf-color-state-derived-tint: color-mix(in srgb, var(--mgf-derived) 16%, white);
  --mgf-color-state-derived-strong: color-mix(in srgb, var(--mgf-derived) 66%, black);
  --mgf-shadow-focus: 0 0 0 4px rgb(43 183 163 / 0.35);
}

/* ---- Dark theme — Ink ground, Mist text, accents preserved ----
 * ONE dark map, emitted twice (explicit opt-in below, OS-auto after it):
 * the two paths are generated from the same source and cannot drift. */
[data-theme="dark"] {
  --mgf-color-bg-canvas: var(--mgf-ink);
  --mgf-color-bg-surface: var(--mgf-indigo);
  --mgf-color-bg-surface-raised: var(--mgf-indigo);
  --mgf-color-bg-muted: rgb(233 236 242 / 0.1);
  --mgf-color-bg-inverse: var(--mgf-paper);
  --mgf-color-text-primary: var(--mgf-mist);
  --mgf-color-text-secondary: color-mix(in srgb, var(--mgf-slate) 55%, white);
  --mgf-color-text-inverse: var(--mgf-ink);
  --mgf-color-text-accent: var(--mgf-gold);
  --mgf-color-border-subtle: rgb(233 236 242 / 0.25);
  --mgf-color-border-strong: color-mix(in srgb, var(--mgf-slate) 35%, white);
  --mgf-color-link: color-mix(in srgb, var(--mgf-teal) 85%, white);
  --mgf-color-link-hover: color-mix(in srgb, var(--mgf-teal) 78%, white);
  --mgf-color-focus-ring: var(--mgf-gold);
  --mgf-color-action-primary-bg: var(--mgf-gold);
  --mgf-color-action-primary-text: var(--mgf-ink);
  --mgf-color-action-secondary-bg: transparent;
  --mgf-color-action-secondary-text: var(--mgf-mist);
  --mgf-color-action-secondary-border: currentColor;
  --mgf-color-status-error-bg: var(--mgf-error);
  --mgf-color-status-error-text: var(--mgf-ink);
  --mgf-color-status-error-tint: color-mix(in srgb, var(--mgf-error) 28%, var(--mgf-ink));
  --mgf-color-status-error-strong: color-mix(in srgb, var(--mgf-error) 32%, white);
  --mgf-color-status-warning-bg: var(--mgf-warning);
  --mgf-color-status-warning-text: var(--mgf-ink);
  --mgf-color-status-warning-tint: color-mix(in srgb, var(--mgf-warning) 26%, var(--mgf-ink));
  --mgf-color-status-warning-strong: color-mix(in srgb, var(--mgf-warning) 82%, white);
  --mgf-color-status-info-bg: var(--mgf-info);
  --mgf-color-status-info-text: var(--mgf-paper);
  --mgf-color-status-info-tint: color-mix(in srgb, var(--mgf-info) 30%, var(--mgf-ink));
  --mgf-color-status-info-strong: color-mix(in srgb, var(--mgf-info) 82%, white);
  --mgf-color-status-success-bg: var(--mgf-teal);
  --mgf-color-status-success-text: var(--mgf-ink);
  --mgf-color-status-success-tint: color-mix(in srgb, var(--mgf-teal) 26%, var(--mgf-ink));
  --mgf-color-status-success-strong: color-mix(in srgb, var(--mgf-teal) 82%, white);
  --mgf-color-state-busy: var(--mgf-busy);
  --mgf-color-state-busy-tint: color-mix(in srgb, var(--mgf-busy) 30%, var(--mgf-ink));
  --mgf-color-state-busy-strong: color-mix(in srgb, var(--mgf-busy) 82%, white);
  --mgf-color-state-derived: var(--mgf-derived);
  --mgf-color-state-derived-tint: color-mix(in srgb, var(--mgf-derived) 30%, var(--mgf-ink));
  --mgf-color-state-derived-strong: color-mix(in srgb, var(--mgf-derived) 82%, white);
  --mgf-shadow-focus: 0 0 0 4px rgb(242 169 59 / 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mgf-color-bg-canvas: var(--mgf-ink);
    --mgf-color-bg-surface: var(--mgf-indigo);
    --mgf-color-bg-surface-raised: var(--mgf-indigo);
    --mgf-color-bg-muted: rgb(233 236 242 / 0.1);
    --mgf-color-bg-inverse: var(--mgf-paper);
    --mgf-color-text-primary: var(--mgf-mist);
    --mgf-color-text-secondary: color-mix(in srgb, var(--mgf-slate) 55%, white);
    --mgf-color-text-inverse: var(--mgf-ink);
    --mgf-color-text-accent: var(--mgf-gold);
    --mgf-color-border-subtle: rgb(233 236 242 / 0.25);
    --mgf-color-border-strong: color-mix(in srgb, var(--mgf-slate) 35%, white);
    --mgf-color-link: color-mix(in srgb, var(--mgf-teal) 85%, white);
    --mgf-color-link-hover: color-mix(in srgb, var(--mgf-teal) 78%, white);
    --mgf-color-focus-ring: var(--mgf-gold);
    --mgf-color-action-primary-bg: var(--mgf-gold);
    --mgf-color-action-primary-text: var(--mgf-ink);
    --mgf-color-action-secondary-bg: transparent;
    --mgf-color-action-secondary-text: var(--mgf-mist);
    --mgf-color-action-secondary-border: currentColor;
    --mgf-color-status-error-bg: var(--mgf-error);
    --mgf-color-status-error-text: var(--mgf-ink);
    --mgf-color-status-error-tint: color-mix(in srgb, var(--mgf-error) 28%, var(--mgf-ink));
    --mgf-color-status-error-strong: color-mix(in srgb, var(--mgf-error) 32%, white);
    --mgf-color-status-warning-bg: var(--mgf-warning);
    --mgf-color-status-warning-text: var(--mgf-ink);
    --mgf-color-status-warning-tint: color-mix(in srgb, var(--mgf-warning) 26%, var(--mgf-ink));
    --mgf-color-status-warning-strong: color-mix(in srgb, var(--mgf-warning) 82%, white);
    --mgf-color-status-info-bg: var(--mgf-info);
    --mgf-color-status-info-text: var(--mgf-paper);
    --mgf-color-status-info-tint: color-mix(in srgb, var(--mgf-info) 30%, var(--mgf-ink));
    --mgf-color-status-info-strong: color-mix(in srgb, var(--mgf-info) 82%, white);
    --mgf-color-status-success-bg: var(--mgf-teal);
    --mgf-color-status-success-text: var(--mgf-ink);
    --mgf-color-status-success-tint: color-mix(in srgb, var(--mgf-teal) 26%, var(--mgf-ink));
    --mgf-color-status-success-strong: color-mix(in srgb, var(--mgf-teal) 82%, white);
    --mgf-color-state-busy: var(--mgf-busy);
    --mgf-color-state-busy-tint: color-mix(in srgb, var(--mgf-busy) 30%, var(--mgf-ink));
    --mgf-color-state-busy-strong: color-mix(in srgb, var(--mgf-busy) 82%, white);
    --mgf-color-state-derived: var(--mgf-derived);
    --mgf-color-state-derived-tint: color-mix(in srgb, var(--mgf-derived) 30%, var(--mgf-ink));
    --mgf-color-state-derived-strong: color-mix(in srgb, var(--mgf-derived) 82%, white);
    --mgf-shadow-focus: 0 0 0 4px rgb(242 169 59 / 0.35);
  }
}

/* ---- Role colours — meaning, not decoration; one role per rail ---- */
:root {
  --mgf-role-proof: var(--mgf-gold);
  --mgf-role-opensource: var(--mgf-teal);
  --mgf-role-stewardship: var(--mgf-indigo);
  --mgf-role-neutral: var(--mgf-slate);
}

/* ---- Evidence-viz (Part VIId) — categorical order is FIXED by role;
 * the ramps are computed ladders (the generator enforces the mix law).
 * Every chart carries a provenance caption: measured, not decorated. */
:root {
  --mgf-viz-categorical-1: var(--mgf-gold);
  --mgf-viz-categorical-2: var(--mgf-teal);
  --mgf-viz-categorical-3: var(--mgf-indigo);
  --mgf-viz-categorical-4: var(--mgf-slate);
  --mgf-viz-categorical-5: var(--mgf-busy);
  --mgf-viz-categorical-6: var(--mgf-derived);
  --mgf-viz-seq-indigo-1: #dbdde2;
  --mgf-viz-seq-indigo-2: #b3b7c1;
  --mgf-viz-seq-indigo-3: #81889a;
  --mgf-viz-seq-indigo-4: #505972;
  --mgf-viz-seq-indigo-5: #1e2a4a;
  --mgf-viz-div-1: var(--mgf-teal);
  --mgf-viz-div-2: #73cfc2;
  --mgf-viz-div-3: #b9e7e1;
  --mgf-viz-div-4: var(--mgf-mist);
  --mgf-viz-div-5: #fbe3be;
  --mgf-viz-div-6: #f6c67e;
  --mgf-viz-div-7: var(--mgf-gold);
  --mgf-viz-div-mid-dark: color-mix(in srgb, var(--mgf-mist) 18%, var(--mgf-ink));
}

/* ---- Component tokens (compose from the semantic roles above) ---- */
:root {
  --mgf-button-radius: var(--mgf-radius-md);
  --mgf-button-padding-block: var(--mgf-space-3);
  --mgf-button-padding-inline: var(--mgf-space-6);
  --mgf-card-bg: var(--mgf-color-bg-surface);
  --mgf-card-border: var(--mgf-color-border-subtle);
  --mgf-card-radius: var(--mgf-radius-lg);
  --mgf-card-padding: var(--mgf-space-6);
  --mgf-card-shadow: var(--mgf-shadow-sm);
  --mgf-input-bg: var(--mgf-color-bg-surface);
  --mgf-input-text: var(--mgf-color-text-primary);
  --mgf-input-border: var(--mgf-color-border-strong);
  --mgf-input-border-focus: var(--mgf-color-focus-ring);
  --mgf-input-radius: var(--mgf-radius-sm);
  --mgf-badge-radius: var(--mgf-radius-sm);
  --mgf-badge-border: var(--mgf-color-border-strong);
}