/* ============================================================================
   IMPERIUM — Brand Design Tokens  ·  v5.1  ·  2026-07-22
   Self-contained. Fonts pre-installed in ./fonts. Reference for ALL material.

   SYSTEM
   - Type:   Emilio (display, whole family, per-weight PRESETS) + Switzer (body).
             No mono, no Cinzel. Emilio Light = primary.
   - Colour: green-only heart — Racing Green (primary) + Mint + Bali + Deep,
             a neutral spine (Paper Sage / Bone / Paper / Console / Ink),
             ONE accent = Ember. NO champagne, NO taupe, NO warm secondary.
   - Steps:  100 · 300 · 400 · 600 · 700 · 800 · 900  (per scale).
   - Radius: 40px standard (LOCKED 2026-07-27; 10px inputs/chips, pill tags).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. FONT PRESETS — each weight is its OWN family so it always loads distinctly
   -------------------------------------------------------------------------- */
@font-face{font-family:"Emilio Thin";src:url("./fonts/Emilio-Thin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Emilio ExtraLight";src:url("./fonts/Emilio-ExtraLight.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Emilio Light";src:url("./fonts/Emilio-Light.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Emilio Light";src:url("./fonts/Emilio-LightItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Emilio Regular";src:url("./fonts/Emilio-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Emilio Regular";src:url("./fonts/Emilio-RegularItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Emilio SemiBold";src:url("./fonts/Emilio-SemiBold.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Emilio SemiBold";src:url("./fonts/Emilio-SemiBoldItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Emilio Bold";src:url("./fonts/Emilio-Bold.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Emilio Black";src:url("./fonts/Emilio-Black.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:"Switzer Regular";src:url("./fonts/Switzer-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer Medium";src:url("./fonts/Switzer-Medium.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer Semibold";src:url("./fonts/Switzer-Semibold.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* ---- FONT TOKENS (call the preset you want; never rely on synthetic weight) */
  --emilio-thin:"Emilio Thin", Georgia, serif;
  --emilio-extralight:"Emilio ExtraLight", Georgia, serif;
  --emilio-light:"Emilio Light", Georgia, serif;        /* PRIMARY display */
  --emilio-regular:"Emilio Regular", Georgia, serif;
  --emilio-semibold:"Emilio SemiBold", Georgia, serif;  /* emphasis only */
  --emilio-bold:"Emilio Bold", Georgia, serif;
  --emilio-black:"Emilio Black", Georgia, serif;

  --switzer:"Switzer Regular", ui-sans-serif, system-ui, sans-serif;   /* body */
  --switzer-medium:"Switzer Medium", ui-sans-serif, system-ui, sans-serif;   /* eyebrows */
  --switzer-semibold:"Switzer Semibold", ui-sans-serif, system-ui, sans-serif;

  --font-display:var(--emilio-light);   /* default headline face */
  --font-body:var(--switzer);           /* default body face */
  --tracking-eyebrow:0.22em;

  /* --------------------------------------------------------------------------
     2. COLOUR — GREEN-ONLY + NEUTRAL SPINE + EMBER   (steps 100/300/400/600/700/800/900)
     ------------------------------------------------------------------------ */

  /* Racing Green — PRIMARY */
  --racing-100:#D3E0D9; --racing-300:#5E8C74; --racing-400:#2E6A4C;
  --racing-600:#1B5637; --racing-700:#11462C; --racing-800:#0C3220; --racing-900:#071C12;
  --racing-350:#46705C; /* muted supporting green: light-theme muted text, Light-Minimalism supporting copy */
  --racing:var(--racing-700);

  /* Mint — vivid supporting green (Alex-locked: 100 #D8EBDD, 300 #4CB782) */
  --mint-100:#D8EBDD; --mint-300:#4CB782; --mint-400:#35A06D;
  --mint-600:#227A50; --mint-700:#1B6342; --mint-800:#124630; --mint-900:#0A2A1D;
  --mint:var(--mint-300);

  /* Bali — jade accent green (never blue) */
  --bali-100:#D6EEE8; --bali-300:#52B49C; --bali-400:#3FA085;
  --bali-600:#2C7C67; --bali-700:#226352; --bali-800:#174539; --bali-900:#0D2822;
  --bali:var(--bali-400);

  /* Deep Green — darkest brand green anchor */
  --deep:#0A1F14;

  /* Ink — the black */
  --ink-100:#D0D0CF; --ink-300:#73716E; --ink-400:#3A3833;
  --ink-600:#15130E; --ink-700:#110F0B; --ink-800:#0A0906; --ink-900:#040403;
  --ink:var(--ink-600);

  /* Bone — the "white" (subtle warm off-white) */
  --bone-50:#FDFCFB; --bone-100:#FBF9F7; --bone-300:#F6F4EE;
  --bone-500:#F4F1EA; --bone-700:#C3C1BB; --bone-900:#92918C;
  --bone:var(--bone-500);

  /* Paper — near-white working surface */
  --paper:#F7F6F1;

  /* Paper Sage — refined faint-sage page ground */
  --sage-50:#F4F7F1; --sage-100:#EDF2E8; --sage-200:#E1E9D9; --sage-300:#CFDAC2;
  --sage:var(--sage-100);

  /* Console Ground — dark dashboard surfaces + elevation ladder */
  --console-000:#070E0A; --console-ground:#0C1712; --console-raised:#111E17;
  --console-overlay:#17281F; --console-line:#24352C;

  /* Console-card gradient ramp (locked, BRAND-BOOK §5): darkest card grounds,
     used as linear-gradient(168deg, card-1, card-2 40%, card-3 70%, card-4) */
  --console-card-1:#0F1912; --console-card-2:#0A130E;
  --console-card-3:#07100A; --console-card-4:#060D08;

  /* Mockup surface set (MOCKUPS.md): warm gradient card surfaces, never pure white */
  --surface-mockup-1:#FAF9F4; --surface-mockup-2:#F7F5EE;
  --surface-mockup-3:#F2F0E6; --surface-mockup-panel:#F9F8F3;

  /* Ember — the ONE accent: saturated alert red. Dashboard, sparingly. */
  --ember-100:#FBDAD3; --ember-300:#EE7A64; --ember-400:#E85340;
  --ember-500:#E23A28; --ember-600:#C22C1D; --ember-700:#971F14;
  --ember:var(--ember-500); --ember-bright:#FF4632;

  /* --------------------------------------------------------------------------
     3. SEMANTIC TOKENS — LIGHT / "PAPER" MODE (default)
     ------------------------------------------------------------------------ */
  --surface-page:var(--bone-500); /* Bone default ground (Alex 2026-08-04): warm beige, never greenish */
  --surface-panel:var(--paper);
  --surface-raised:var(--bone-50);
  --surface-invert:var(--racing-700);
  --text-primary:var(--ink-600);
  --text-secondary:var(--ink-400);
  --text-muted:var(--racing-400);
  --text-inverse:var(--bone-500);
  --text-brand:var(--racing-700);
  --border-hairline:color-mix(in srgb, var(--ink-600) 12%, transparent);
  --border-strong:color-mix(in srgb, var(--ink-600) 22%, transparent);
  --brand:var(--racing-700);
  --accent-mint:var(--mint-300);
  --accent-bali:var(--bali-400);
  --alert:var(--ember-500);

  /* ---- SHAPE / ELEVATION / MOTION */
  --radius-sm:10px; --radius:20px; --radius-pill:999px;
  --stroke:1px;
  --shadow-sm:0 1px 2px color-mix(in srgb, var(--ink-600) 8%, transparent);
  --shadow:0 8px 30px color-mix(in srgb, var(--ink-600) 10%, transparent);
  --shadow-console:0 12px 40px rgba(0,0,0,0.45);
  --ease:cubic-bezier(0.22,1,0.36,1); --dur:0.6s;

  /* ---- LAYOUT (added 2026-08-01)
     Spacing: 8px base. --space-1..12 = 8/16/24/32/40/48/64/80/96/128/160/192.
     The card "1u padding unit" (card-anatomy.svg) maps to --space-5 (40px) on a
     full-size card; scale it proportionally with the card.
     Containers: content max 1440px, full-bleed max 1720px. Grid: 12 columns,
     gutter --space-3. Breakpoints: 640 / 1024 / 1440.
     Section rhythm: consecutive page sections are separated by --space-8 (80px)
     on desktop, --space-6 (48px) under 1024px — no giant voids, no cramming. */
  --space-1:8px;  --space-2:16px; --space-3:24px;  --space-4:32px;
  --space-5:40px; --space-6:48px; --space-7:64px;  --space-8:80px;
  --space-9:96px; --space-10:128px; --space-11:160px; --space-12:192px;
  --container-content:1440px; --container-bleed:1720px;
  --grid-columns:12; --grid-gutter:var(--space-3);
  --bp-sm:640px; --bp-md:1024px; --bp-lg:1440px;
  --section-gap:var(--space-8);

  /* ---- TYPE SCALE */
  --step-h1:clamp(3rem,6vw,5.5rem);
  --step-h2:clamp(2.25rem,4vw,4.25rem);
  --step-h3:clamp(1.5rem,2.4vw,2rem);
  --step-body:clamp(1rem,1.15vw,1.125rem);
  --step-small:0.875rem;
  --step-eyebrow:0.8rem;
}

/* ---- CONSOLE / DASHBOARD THEME — apply [data-theme="console"] on a container */
[data-theme="console"]{
  --surface-page:var(--console-ground);
  --surface-panel:var(--console-raised);
  --surface-raised:var(--console-overlay);
  --surface-invert:var(--bone-500);
  --text-primary:var(--bone-500);
  --text-secondary:var(--mint-300);
  --text-muted:var(--mint-400);
  --text-inverse:var(--ink-600);
  --text-brand:var(--mint-300);
  --border-hairline:color-mix(in srgb, var(--bone-500) 10%, transparent);
  --border-strong:var(--console-line);
  --alert:var(--ember-bright);
  --shadow:var(--shadow-console);
}

/* ----------------------------------------------------------------------------
   4. BASE ELEMENT DEFAULTS  (optional baseline)
   -------------------------------------------------------------------------- */
.imperium, .imperium *{box-sizing:border-box}
.imperium{
  background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-body); font-size:var(--step-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; letter-spacing:0.005em;
}
.imperium h1,.imperium h2,.imperium .display{
  font-family:var(--emilio-light); font-weight:400; line-height:1.04;
  letter-spacing:-0.01em; color:var(--text-primary); margin:0;
}
.imperium h3{font-family:var(--emilio-semibold);font-weight:400;line-height:1.1;margin:0;color:var(--text-primary)}
.imperium h1{font-size:var(--step-h1)} .imperium h2{font-size:var(--step-h2)} .imperium h3{font-size:var(--step-h3)}
.imperium .eyebrow{
  font-family:var(--switzer-medium); font-size:var(--step-eyebrow);
  text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--text-muted);
}
.imperium .wordmark{font-family:var(--emilio-light);text-transform:uppercase;letter-spacing:0.14em}
.imperium .invert{background:var(--surface-invert);color:var(--text-inverse)}
.imperium .panel{background:var(--surface-panel);border-radius:var(--radius);border:var(--stroke) solid var(--border-hairline)}
.imperium .btn{font-family:var(--switzer-medium);font-size:var(--step-small);padding:0.75em 1.4em;
  border-radius:var(--radius-sm);border:var(--stroke) solid transparent;cursor:pointer;transition:all var(--dur) var(--ease)}
.imperium .btn-primary{background:var(--racing-700);color:var(--bone-500)}
.imperium .btn-primary:hover{background:var(--racing-800)}
.imperium .btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.imperium .btn-alert{background:var(--alert);color:var(--bone-50)}