/* ============================================================================
   MEDiAGATO Theme Kit — swappable design tokens
   ----------------------------------------------------------------------------
   ONE canonical token vocabulary (--mg-*). Every product maps its own local
   styles to these once; a full reskin is then just swapping token values or
   flipping data-mg-theme. Ride a look while it's fresh, swap it when it dates.

   USAGE
     1. Put data-mg-theme on a root element:  <html data-mg-theme="instrument">
     2. (optional) dark mode:                 <html data-mg-theme="instrument" data-mg-mode="dark">
        …or rely on the prefers-color-scheme block at the bottom.
     3. In your product, map local tokens to the vocabulary, e.g. (Tailwind v4):
          :root { --primary: var(--mg-accent); --background: var(--mg-bg); … }
        Now your product is themed — and reskins whenever --mg-* changes.

   ADD A THEME when "instrument" starts to look AI-dated: copy the block, rename
   the data-mg-theme value, restyle the values. Nothing in any product changes.
   ============================================================================ */

/* ---- canonical vocabulary (documented defaults = instrument light) --------- */
:root,
[data-mg-theme] {
  --mg-radius: 0.5rem;
  --mg-font-display: Bahnschrift, "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --mg-font-body: Seravek, "Segoe UI", Avenir, Corbel, "Helvetica Neue", "DejaVu Sans", sans-serif;
  --mg-font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --mg-tracking-label: 0.14em;
}

/* ============================== INSTRUMENT ================================== */
/* Instrument-panel command center — brass accent, mono readouts. The 2026 lean. */
[data-mg-theme="instrument"] {
  --mg-bg: #e8ecf3;
  --mg-surface: #f8fafd;
  --mg-surface-2: #eff3f9;
  --mg-border: #c7d1e1;
  --mg-border-2: #dae1ec;
  --mg-ink: #141f38;
  --mg-ink-2: #45577a;
  --mg-ink-3: #73829d;
  --mg-accent: #a97614;
  --mg-accent-ink: #ffffff;
  --mg-accent-soft: rgba(169, 118, 20, 0.12);
  --mg-good: #1f8a5b;
  --mg-warn: #d97706;
  --mg-crit: #a81e26;
  --mg-good-soft: rgba(31, 138, 91, 0.13);
  --mg-warn-soft: rgba(217, 119, 6, 0.13);
  --mg-crit-soft: rgba(168, 30, 38, 0.12);
  --mg-focus: #8a5f0d;
  --mg-shadow: 0 1px 2px rgba(20, 31, 56, 0.07), 0 10px 28px rgba(20, 31, 56, 0.07);
}
[data-mg-theme="instrument"][data-mg-mode="dark"] {
  --mg-bg: #070e1b;
  --mg-surface: #0e1728;
  --mg-surface-2: #131f35;
  --mg-border: #22304b;
  --mg-border-2: #1a2740;
  --mg-ink: #e9eef7;
  --mg-ink-2: #8ca0bf;
  --mg-ink-3: #5e7192;
  --mg-accent: #d9a036;
  --mg-accent-ink: #0b1120;
  --mg-accent-soft: rgba(217, 160, 54, 0.14);
  --mg-good: #39b27a;
  --mg-warn: #dd8f35;
  --mg-crit: #e5484d;
  --mg-good-soft: rgba(57, 178, 122, 0.14);
  --mg-warn-soft: rgba(221, 143, 53, 0.14);
  --mg-crit-soft: rgba(229, 72, 77, 0.14);
  --mg-focus: #d9a036;
  --mg-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 36px rgba(0, 0, 0, 0.35);
}

/* ================================= SLATE =================================== */
/* The prior/neutral look (indigo on slate, rounded, Inter). Kept as the proof  */
/* that swapping works — and as an easy "revert" if a reskin ever goes wrong.   */
[data-mg-theme="slate"] {
  --mg-radius: 0.75rem;
  --mg-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
  --mg-font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --mg-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mg-tracking-label: 0.1em;
  --mg-bg: #f8fafc;
  --mg-surface: #ffffff;
  --mg-surface-2: #f1f5f9;
  --mg-border: #e2e8f0;
  --mg-border-2: #edf1f6;
  --mg-ink: #0f172a;
  --mg-ink-2: #475569;
  --mg-ink-3: #64748b;
  --mg-accent: #6366f1;
  --mg-accent-ink: #f8fafc;
  --mg-accent-soft: rgba(99, 102, 241, 0.12);
  --mg-good: #16a34a;
  --mg-warn: #d97706;
  --mg-crit: #dc2626;
  --mg-good-soft: rgba(22, 163, 74, 0.12);
  --mg-warn-soft: rgba(217, 119, 6, 0.12);
  --mg-crit-soft: rgba(220, 38, 38, 0.12);
  --mg-focus: #6366f1;
  --mg-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}
[data-mg-theme="slate"][data-mg-mode="dark"] {
  --mg-bg: #030712;
  --mg-surface: #0f172a;
  --mg-surface-2: #1e293b;
  --mg-border: #1e293b;
  --mg-border-2: #172033;
  --mg-ink: #f1f5f9;
  --mg-ink-2: #cbd5e1;
  --mg-ink-3: #94a3b8;
  --mg-accent: #818cf8;
  --mg-accent-ink: #0b1120;
  --mg-accent-soft: rgba(129, 140, 248, 0.14);
  --mg-good: #4ade80;
  --mg-warn: #fbbf24;
  --mg-crit: #fb7185;
  --mg-good-soft: rgba(74, 222, 128, 0.14);
  --mg-warn-soft: rgba(251, 191, 36, 0.14);
  --mg-crit-soft: rgba(251, 113, 133, 0.14);
  --mg-focus: #818cf8;
  --mg-shadow: 0 24px 50px rgba(2, 6, 23, 0.65);
}

/* ---- optional: follow the OS when data-mg-mode is not set explicitly -------- */
@media (prefers-color-scheme: dark) {
  [data-mg-theme="instrument"]:not([data-mg-mode="light"]) {
    --mg-bg: #070e1b; --mg-surface: #0e1728; --mg-surface-2: #131f35;
    --mg-border: #22304b; --mg-border-2: #1a2740;
    --mg-ink: #e9eef7; --mg-ink-2: #8ca0bf; --mg-ink-3: #5e7192;
    --mg-accent: #d9a036; --mg-accent-ink: #0b1120; --mg-accent-soft: rgba(217, 160, 54, 0.14);
    --mg-good: #39b27a; --mg-warn: #dd8f35; --mg-crit: #e5484d;
    --mg-good-soft: rgba(57,178,122,.14); --mg-warn-soft: rgba(221,143,53,.14); --mg-crit-soft: rgba(229,72,77,.14);
    --mg-focus: #d9a036; --mg-shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.35);
  }
  [data-mg-theme="slate"]:not([data-mg-mode="light"]) {
    --mg-bg: #030712; --mg-surface: #0f172a; --mg-surface-2: #1e293b;
    --mg-border: #1e293b; --mg-border-2: #172033;
    --mg-ink: #f1f5f9; --mg-ink-2: #cbd5e1; --mg-ink-3: #94a3b8;
    --mg-accent: #818cf8; --mg-accent-ink: #0b1120; --mg-accent-soft: rgba(129,140,248,.14);
    --mg-good: #4ade80; --mg-warn: #fbbf24; --mg-crit: #fb7185;
    --mg-good-soft: rgba(74,222,128,.14); --mg-warn-soft: rgba(251,191,36,.14); --mg-crit-soft: rgba(251,113,133,.14);
    --mg-focus: #818cf8; --mg-shadow: 0 24px 50px rgba(2,6,23,.65);
  }
}