/*
 * JMH Studio — Canonical Design Token System
 * Y01.S14.13
 * Shared DNA + two brand themes; default = Studio.
 *
 * Structure:
 *   :root                 → shared primitives (fonts, type scale, spacing, radius)
 *                           + STUDIO color theme as the DEFAULT (no data-brand needed)
 *   [data-brand="studio"] → Studio (grey / Cyberspace) color theme — explicit
 *   [data-brand="mfa"]    → MFA (navy / Rays) color theme — navy overrides
 *   Legacy alias block    → old token names re-pointed at new tokens so existing
 *                           pages keep resolving and follow the active theme.
 *
 * A page importing this file with NO data-brand attribute renders the Studio
 * (grey) theme — preserving current behavior.
 */

/* ── Google Fonts — Cormorant Garamond + DM Mono only (Syne dropped) ──────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Mono:wght@300;400;500&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   :root — SHARED PRIMITIVES + STUDIO THEME (default)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Typography ──────────────────────────────────────────── */
  --font-display:   'Cormorant Garamond', serif;
  --font-ui:        'DM Mono', monospace;
  --font-mono:      'DM Mono', monospace;

  /* Heading scale */
  --text-display:   36px;
  --text-h1:        32px;
  --text-h2:        26px;
  --text-h3:        18px;

  /* Body scale */
  --text-base:      12px;
  --text-sm:        11px;
  --text-xs:        10px;
  --text-2xs:       9px;

  /* Heading style */
  --heading-weight:   300;
  --heading-tracking: -0.02em;

  /* Label tracking */
  --tracking-wide:   .08em;
  --tracking-wider:  .12em;
  --tracking-widest: .25em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Radius / rules ──────────────────────────────────────── */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  --line-body:  1.7;
  --line-tight: 1.2;
  --rule:       1px;

  /* ── STUDIO color theme (grey / Cyberspace) — DEFAULT ────── */
  --bg:         #2c3038;
  --surface:    #383e47;
  --surface-2:  #4e555e;
  --border-color: #4e555e;
  --text:       #dcd8d0;
  --muted:      #8a9099;
  --accent:     #6b9fd4;   /* steel — LOCKED (v1.1 legibility lift) */
  --accent-2:   #3f5f86;   /* deep indigo-steel secondary */
  --success:    #5ecf6a;
  --attention:  #e8a23a;
  --error:      #e8547a;

  /* Border shorthand (back-compat: pages use `border: var(--border)`). */
  --border:     var(--rule) solid var(--border-color);
}

/* ══════════════════════════════════════════════════════════════════════════
   [data-brand="studio"] — Studio (grey / Cyberspace) — explicit, == defaults
   ════════════════════════════════════════════════════════════════════════ */
[data-brand="studio"] {
  --bg:         #2c3038;
  --surface:    #383e47;
  --surface-2:  #4e555e;
  --border-color: #4e555e;
  --text:       #dcd8d0;
  --muted:      #8a9099;
  --accent:     #6b9fd4;   /* steel — LOCKED */
  --accent-2:   #3f5f86;   /* deep indigo-steel secondary */
  --success:    #5ecf6a;
  --attention:  #e8a23a;
  --error:      #e8547a;
  --border:     var(--rule) solid var(--border-color);
}

/* ══════════════════════════════════════════════════════════════════════════
   [data-brand="mfa"] — MFA (navy / Rays) — restrained institutional
   ════════════════════════════════════════════════════════════════════════ */
[data-brand="mfa"] {
  --bg:         #092c5c;
  --surface:    #0d3b6e;
  --surface-2:  #114277;
  --border-color: #1a5276;
  --text:       #eaf2fb;
  --muted:      #5d7596;
  --accent:     #2f6db0;   /* Columbia blue — LOCKED primary */
  --accent-2:   #8fbce6;   /* light Columbia secondary */
  --success:    #4fc59a;
  --attention:  #f2b24e;
  --error:      #f0555f;
  --border:     var(--rule) solid var(--border-color);
  /* sunburst #d9b400 dropped from core; available as --accent-rare if needed (unused) */
  --accent-rare: #d9b400;
}

/* ══════════════════════════════════════════════════════════════════════════
   LEGACY BACK-COMPAT ALIASES
   Old token names re-pointed at the canonical tokens so existing pages keep
   resolving. These inherit the active theme automatically (var() resolves at
   use site). --bg is shared by both naming schemes and defined above.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* type / font legacy names */
  --font-heading:  var(--font-display);   /* old name for display serif */

  /* color legacy names */
  --accent2:    var(--accent-2);
  --ac:         var(--accent);            /* canonical badge/accent blue */
  --green:      var(--success);
  --red:        var(--error);
  --amber:      var(--attention);
  --grey2:      var(--muted);
  --label:      var(--muted);
  --surface2:   var(--surface-2);
  --border-c:   var(--border-color);

  /* jmh-brand legacy primitives (greys used by archived/superseded rows) */
  --s1:         var(--surface);
  --s2:         var(--surface-2);
  --t1:         var(--text);
  --t2:         var(--muted);

  /* ── Superset names (from tokens-studio.css) — default/studio resolution ──────
     For studio/default pages these follow the active theme via var(); the
     [data-brand="mfa"] block above overrides with explicit navy values. */
  --background: var(--bg);
  --primary:    var(--accent);
  --secondary:  var(--accent-2);
  --tertiary:   var(--accent-2);
  --warn:       var(--attention);
  --accent3:    var(--attention);
  --accent4:    var(--accent);
  --jmh:        var(--accent);
  --car:        var(--accent-2);
  --ven:        #2bb8c4;
  --sunburst:   var(--accent-rare, #d9b400);
}

/* ══════════════════════════════════════════════════════════════════════════
   [data-brand="mfa"] — SUPERSET OVERRIDES (must come AFTER the legacy :root
   alias block above, since :root and [data-brand="mfa"] have equal specificity
   and source order decides). Explicit navy values matching the former
   tokens-studio.css exactly, so an mfa page resolves identically to the legacy
   navy theme. Brand-role names + venture/legacy aliases both covered.
   ════════════════════════════════════════════════════════════════════════ */
[data-brand="mfa"] {
  --background: #092c5c;   /* navy base (== --bg) */
  --primary:    #2f6db0;   /* columbia-deep (== --accent) */
  --secondary:  #d9b400;   /* sunburst yellow */
  --tertiary:   #8fbce6;   /* columbia blue (== --accent-2) */
  --warn:       #f2b24e;   /* (== --attention) */
  --accent3:    #f2b24e;   /* gold */
  --accent4:    #2f6db0;   /* section labels / brand (== --primary) */
  --jmh:        #2f6db0;   /* venture JMH (== --primary) */
  --car:        #d9b400;   /* venture CAR (sunburst) */
  --ven:        #2bb8c4;   /* venture VEN (teal-cyan) */
  --sunburst:   #d9b400;   /* explicit sunburst (portal publish-btn) */
}

/* ── Base Reset ───────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}