@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
/* Substrate theme: Transit (low-intensity variant)
 * An explicitly-selected theme: it applies only under [data-theme="transit"].
 * The default ground state (no data-theme, or an unrecognized one) is the
 * Accessible theme — see substrate-theme-accessible.css. Dark mode applies
 * when the user picks dark via the Mode picker (data-color-mode="dark"), OR
 * when the OS reports prefers-color-scheme: dark and the user has not
 * overridden to light. Print always renders light regardless of mode. */

:root[data-theme="transit"] {
  color-scheme: light;
  /* ─── Light mode ──────────────────────────────────────── */
  --sub-bg:           #E8E4DA;
  --sub-surface:      #D8D4CA;
  --sub-border:       #B8B4A8;
  --sub-text:         #383430;
  --sub-muted:        #7A766E;

  --sub-teal:         #1B3A5C;
  --sub-teal-light:   #CEDAD0;
  --sub-amber:        #9E6B1A;
  --sub-amber-light:  #E0D4B8;
  --sub-violet:       #5E4A8A;
  --sub-violet-light: #D8D4E4;
  --sub-iron:         #4A4A4A;
  --sub-ember:        #8E3A2A;
  --sub-ember-light:  #E4D4D0;

  /* Semantic state tokens */
  --sub-success:      #1F8A3A;
  --sub-danger:       var(--sub-ember);
  --sub-danger-light: var(--sub-ember-light);

  /* Spec-stamp tokens */
  --sub-stamp-flagged:    var(--sub-teal);
  --sub-stamp-restricted: var(--sub-violet);
  --sub-stamp-audited:    var(--sub-amber);
  --sub-stamp-frozen:     var(--sub-iron);
  --sub-stamp-disputed:   var(--sub-ember);

  /* Roll-flash tokens */
  --sub-roll-critical: var(--sub-success);
  --sub-roll-fumble:   var(--sub-ember);

  --font-primary:       'Space Grotesk', sans-serif;
  --font-institutional: 'Space Mono', monospace;

/* ─── Rim system contract ─────────────────────────────────────────────
 * Consumed by every component stylesheet (css/substrate-nav.css documents
 * the contract). The theme keeps its own faces and palette; the discipline
 * — three type roles, a heading range, 1px rules, 2px control corners —
 * is shared. */
  --font-display:       'Space Grotesk', sans-serif;
  --h1-color:           #1B3A5C;   /* Teal */
  --h2-color:           #9E6B1A;   /* Amber */
  --h3-color:           #5E4A8A;   /* Violet — headings only */
  --h4-color:           #1B3A5C;
  --rule-weight:        1px;
  --radius-control:     2px;
  --radius-plate:       0;
  --track-body:         0;
  --track-inst:         0.06em;
}

/* ─── Dark mode — user explicitly selected ─────────────── */
@media screen {
  :root[data-theme="transit"][data-color-mode="dark"] {
    color-scheme: dark;
    --sub-bg:           #272420;
    --sub-surface:      #333028;
    --sub-border:       #504C44;
    --sub-text:         #C4C0B4;
    --sub-muted:        #8A8478;

    --sub-teal:         #7AA8D8;
    --sub-teal-light:   #20303C;
    --sub-amber:        #D4A84A;
    --sub-amber-light:  #383020;
    --sub-violet:       #9A86C2;
    --sub-violet-light: #302840;
    --sub-iron:         #9A9A9A;
    --sub-ember:        #D06A58;
    --sub-ember-light:  #382420;

    --sub-success:      #4ED27A;
    --h1-color:         #7AA8D8;
    --h2-color:         #D4A84A;
    --h3-color:         #9A86C2;
    --h4-color:         #7AA8D8;
  }
}

/* ─── Dark mode — system preference, no user override ──── */
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="transit"]:not([data-color-mode="light"]) {
    color-scheme: dark;
    --sub-bg:           #272420;
    --sub-surface:      #333028;
    --sub-border:       #504C44;
    --sub-text:         #C4C0B4;
    --sub-muted:        #8A8478;

    --sub-teal:         #7AA8D8;
    --sub-teal-light:   #20303C;
    --sub-amber:        #D4A84A;
    --sub-amber-light:  #383020;
    --sub-violet:       #9A86C2;
    --sub-violet-light: #302840;
    --sub-iron:         #9A9A9A;
    --sub-ember:        #D06A58;
    --sub-ember-light:  #382420;

    --sub-success:      #4ED27A;
    --h1-color:         #7AA8D8;
    --h2-color:         #D4A84A;
    --h3-color:         #9A86C2;
    --h4-color:         #7AA8D8;
  }
}