/* ============================================================
   MESBREID — V17 Design Tokens (foundation layer)
   Source of truth: MESBREID Brand Guidelines + Figma Design System
   Rule zero: strict 0px brutalism. No rounded corners, anywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400;1,600&family=Inter:ital,wght@0,300;0,400;0,600;1,300;1,400&family=JetBrains+Mono:wght@400;700&family=Pinyon+Script&display=swap');

:root {
  /* --- Color: Void foundation --- */
  --void:        #100914;   /* page background */
  --void-deep:   #0C070F;   /* card / panel background */
  --void-raised: #150D1E;   /* inputs, inner surfaces */

  /* --- Color: structural + action --- */
  --uv:          #8A38E0;   /* Deep UV — structure, locked states, borders */
  --sun:         #E5B80B;   /* Bright Sunflower — action, unlocked, KPIs */

  /* --- Color: text --- */
  --champagne:   #EAE0C8;   /* metrics, eyebrows, warm body */
  --starlight:   #F4F1F8;   /* primary headings */
  --ash:         #A498B5;   /* body text */
  --dusk:        #6E6482;   /* subdued tags, footnotes */

  /* --- Type families (intent-coded) --- */
  --f-display:   'Cinzel', serif;               /* MBA / architecture */
  --f-script:    'Pinyon Script', cursive;      /* Liberal Arts / serendipity */
  --f-editorial: 'Cormorant Garamond', serif;   /* pull quotes, italic authority */
  --f-body:      'Inter', sans-serif;           /* legibility in dense areas */
  --f-mono:      'JetBrains Mono', monospace;   /* tags, taxonomy, data */

  /* --- Type scale --- */
  --fs-hero:     clamp(32px, 5vw, 52px);
  --fs-h1:       28px;
  --fs-h2:       22px;
  --fs-h3:       17px;
  --fs-body:     14px;
  --fs-small:    12px;
  --fs-micro:    11px;

  /* --- Rhythm --- */
  --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;
  --sp-4: 40px; --sp-5: 64px;  --sp-6: 104px;

  /* --- Lines --- */
  --line-uv:   1px solid var(--uv);
  --line-dusk: 1px solid var(--dusk);
  --line-sun:  2px solid var(--sun);
}

/* --- Rule zero, enforced globally --- */
*, *::before, *::after { border-radius: 0 !important; box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--champagne);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* --- Core type roles --- */
.t-eyebrow  { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 3px; color: var(--sun); text-transform: uppercase; }
.t-display  { font-family: var(--f-display); color: var(--starlight); letter-spacing: 2px; font-weight: 700; }
.t-script   { font-family: var(--f-script); color: var(--uv); font-size: 1.8em; font-weight: 400; }
.t-quote    { font-family: var(--f-editorial); font-style: italic; color: var(--champagne); font-size: 1.25em; line-height: 1.6; }
.t-body     { color: var(--ash); }
.t-tag      { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 2px; color: var(--dusk); }
.t-metric   { font-family: var(--f-display); color: var(--sun); font-weight: 700; }

/* --- Surfaces --- */
.s-panel    { background: var(--void-deep); border: var(--line-uv); padding: var(--sp-4); }
.s-inset    { background: var(--void-raised); border: var(--line-dusk); }
.s-gilded   { background: var(--void-deep); border: var(--line-sun); }

/* --- Actions --- */
.btn        { display: inline-block; background: var(--sun); color: var(--void); border: none; padding: 14px 32px;
              font-family: var(--f-display); font-weight: 700; font-size: var(--fs-body); letter-spacing: 3px;
              text-decoration: none; cursor: pointer; text-transform: uppercase; }
.btn:hover  { background: var(--starlight); }
.btn-ghost  { background: var(--void-raised); color: var(--ash); border: var(--line-dusk); }
.btn-ghost:hover { border-color: var(--sun); color: var(--champagne); }

/* --- Locked / unlocked state language --- */
.is-locked   { border-color: var(--uv);  }
.is-unlocked { border-color: var(--sun); }

/* --- Layout primitives --- */
.wrap       { max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-3); }
.deepdive   { display: grid; grid-template-columns: 30% 1fr; gap: var(--sp-4); }   /* Asymmetrical Deep Dive */
.deepdive > aside { position: sticky; top: var(--sp-3); align-self: start; }
.filmstrip  { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-2); }
.filmstrip > * { scroll-snap-align: start; flex: 0 0 auto; }
@media (max-width: 860px) { .deepdive { grid-template-columns: 1fr; } .deepdive > aside { position: static; } }