/* ============================================================
   Joram Design System — Colors & Typography Tokens
   ============================================================
   IT Project Manager for Web Projects.
   Mood: experienced, grounded, considered. Dunkle Töne + Serif-Headings.

   Conventions:
   - Raw color tokens: --color-*
   - Semantic role tokens: --bg, --fg, --button-bg, etc. (auto-flip in dark)
   - Type scale uses fluid clamp() values for body, fixed-rem for headings
   ============================================================ */

/* -------- Webfonts --------
   Both faces are self-hosted as variable fonts (weight axis).
   Files live in fonts/ — no CDN, no Google Fonts. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/NunitoSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/NunitoSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------
     RAW COLORS (use sparingly — prefer semantic tokens below)
     ------------------------------------------------------------ */
  --color-oxford-blue: #0a1137;       /* Primary blue */
  --color-baby-powder: #f5f7f3;       /* Primary off-white */
  --color-madder: #a6112f;            /* Accent red — critical CTAs / warnings (light) */
  --color-madder-dark: #f0a4b0;       /* Dark-mode CTA — warm rose, AAA on Ink Black */
  --color-rose-quartz: #aca6bb;       /* Muted lilac-grey — dark-mode buttons & muted text */
  --color-ink-black: #0d0d1a;          /* Dark-mode background */

  /* ------------------------------------------------------------
     SEMANTIC ROLES — LIGHT MODE (default)
     Every combination below is AAA per WCAG.
     ------------------------------------------------------------ */
  --bg:                 var(--color-baby-powder);
  --bg-elevated:        #ffffff;
  --fg:                 var(--color-oxford-blue);
  --fg-strong:          var(--color-ink-black);
  --fg-muted:           color-mix(in oklch, var(--color-oxford-blue) 70%, var(--color-baby-powder));

  --border:             color-mix(in oklch, var(--color-oxford-blue) 14%, transparent);
  --border-strong:      color-mix(in oklch, var(--color-oxford-blue) 28%, transparent);

  --accent:             var(--color-madder);
  --accent-fg:          var(--color-baby-powder);

  /* CTA = the SINGLE most important action on a screen. Always Madder. */
  --cta-bg:             var(--color-madder);
  --cta-fg:             var(--color-baby-powder);

  --button-bg:          var(--color-oxford-blue);
  --button-fg:          var(--color-baby-powder);
  --button-bg-hover:    var(--color-baby-powder);
  --button-fg-hover:    var(--color-oxford-blue);
  --button-hover-border: var(--color-oxford-blue);
  --button-bg-press:    color-mix(in oklch, var(--color-oxford-blue) 78%, black);

  --button-secondary-bg:        transparent;
  --button-secondary-fg:        var(--color-oxford-blue);
  --button-secondary-border:    var(--color-oxford-blue);
  --button-secondary-bg-hover:  color-mix(in oklch, var(--color-oxford-blue) 8%, transparent);

  --link:               var(--color-oxford-blue);
  --link-hover:         var(--color-madder);

  --focus-ring:         var(--color-madder);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --font-heading: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --font-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-body-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-features-heading: "case" 1, "zero" 1, "calt" 1;

  /* Display / heading scale — Cormorant Garamond likes a touch of weight + tight tracking */
  --display-1: 700 clamp(3.5rem, 6vw + 1rem, 6rem)/1.02 var(--font-heading);
  --display-2: 600 clamp(2.75rem, 4.5vw + 1rem, 4.5rem)/1.05 var(--font-heading);
  --h1:        800 clamp(2.25rem, 2.5vw + 1rem, 3.25rem)/1.1  var(--font-heading);
  --h2:        600 clamp(1.75rem, 1.5vw + 1rem, 2.5rem)/1.15 var(--font-heading);
  --h3:        600 clamp(1.375rem, 0.75vw + 1rem, 1.75rem)/1.25 var(--font-heading);
  --h4:        600 1.25rem/1.3 var(--font-heading);

  /* Body — Nunito. Default weight is 300 (light). 400 is for emphasis. */
  --body-lg:   300 1.125rem/1.65 var(--font-body);
  --body:      300 1rem/1.6      var(--font-body);
  --body-sm:   300 0.875rem/1.55 var(--font-body);
  --body-emph: 400 1rem/1.6      var(--font-body);
  --caption:   400 0.75rem/1.4   var(--font-body);
  --overline:  600 0.75rem/1.2   var(--font-body); /* uppercased, tracked */

  --tracking-overline: 0.12em;
  --tracking-heading: -0.01em;

  /* ------------------------------------------------------------
     SPACING — 4px base, modular
     ------------------------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* ------------------------------------------------------------
     RADII — restrained; serifs + sharp-ish corners feel grounded
     ------------------------------------------------------------ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------
     SHADOWS — gentle, low-saturation. Tinted with oxford blue.
     ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px 0 rgba(10, 17, 55, 0.06);
  --shadow-sm: 0 2px 6px -1px rgba(10, 17, 55, 0.08), 0 1px 2px 0 rgba(10, 17, 55, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(10, 17, 55, 0.14), 0 2px 4px 0 rgba(10, 17, 55, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(10, 17, 55, 0.22), 0 4px 8px 0 rgba(10, 17, 55, 0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.05);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  color-scheme: light;
}

/* ============================================================
   DARK MODE
   - Background: Ink Black
   - Text: Baby Powder
   - Buttons: Rose Quartz bg, Oxford Blue fg
   - Madder accent is intentionally NOT used in dark mode.
   ============================================================ */
:root[data-theme="dark"],
.theme-dark {
  --bg:                 var(--color-ink-black);
  --bg-elevated:        color-mix(in oklch, var(--color-ink-black) 88%, var(--color-baby-powder));
  --fg:                 var(--color-baby-powder);
  --fg-strong:          var(--color-baby-powder);
  --fg-muted:           var(--color-rose-quartz);

  --border:             color-mix(in oklch, var(--color-rose-quartz) 24%, transparent);
  --border-strong:      color-mix(in oklch, var(--color-rose-quartz) 44%, transparent);

  /* Dark mode keeps the same accent identity — warm rose Madder, lifted for AAA on ink */
  --accent:             var(--color-madder-dark);
  --accent-fg:          var(--color-ink-black);

  /* CTA in dark = warm rose. Stands out from Rose Quartz (which is the secondary button bg). */
  --cta-bg:             var(--color-madder-dark);
  --cta-fg:             var(--color-ink-black);

  --button-bg:          var(--color-rose-quartz);
  --button-fg:          var(--color-oxford-blue);
  --button-bg-hover:    var(--color-ink-black);
  --button-fg-hover:    var(--color-rose-quartz);
  --button-hover-border: var(--color-rose-quartz);
  --button-bg-press:    color-mix(in oklch, var(--color-rose-quartz) 78%, white);

  --button-secondary-bg:        transparent;
  --button-secondary-fg:        var(--color-baby-powder);
  --button-secondary-border:    var(--color-rose-quartz);
  --button-secondary-bg-hover:  color-mix(in oklch, var(--color-rose-quartz) 14%, transparent);

  --link:               var(--color-baby-powder);
  --link-hover:         var(--color-rose-quartz);

  --focus-ring:         var(--color-madder-dark);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55), 0 2px 4px 0 rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.7),  0 4px 8px 0 rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* ============================================================
   ELEMENT DEFAULTS — opt-in via .joram or :root
   ============================================================ */
body, .joram {
  background: var(--bg);
  color: var(--fg);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.joram h1, .joram .h1 { font: var(--h1); letter-spacing: var(--tracking-heading); margin: 0 0 var(--space-4); }
.joram h2, .joram .h2 { font: var(--h2); letter-spacing: var(--tracking-heading); margin: 0 0 var(--space-3); }
.joram h3, .joram .h3 { font: var(--h3); margin: 0 0 var(--space-3); }
.joram h4, .joram .h4 { font: var(--h4); margin: 0 0 var(--space-2); }
.joram .display-1 { font: var(--display-1); letter-spacing: var(--tracking-heading); margin: 0; }
.joram .display-2 { font: var(--display-2); letter-spacing: var(--tracking-heading); margin: 0; }
.joram h1, .joram h2, .joram h3, .joram h4,
.joram .h1, .joram .h2, .joram .h3, .joram .h4,
.joram .display-1, .joram .display-2 { font-feature-settings: var(--font-features-heading); }
h1, h2, h3, h4 { font-feature-settings: var(--font-features-heading); }

.joram p, .joram .body { font: var(--body); margin: 0 0 var(--space-4); max-width: 65ch; text-wrap: pretty; }
.joram .body-lg { font: var(--body-lg); }
.joram .body-sm { font: var(--body-sm); }
.joram .body strong, .joram p strong, .joram b { font-weight: 400; }
.joram .emph { font: var(--body-emph); }
.joram .caption { font: var(--caption); color: var(--fg-muted); }
.joram .overline {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--fg-muted);
}
.font-sans { font-family: var(--font-body-sans); }

.joram a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-standard);
}
.joram a:hover { color: var(--link-hover); }

.joram :is(button, .btn) {
  font: 600 1rem/1 var(--font-body);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.875rem 1.5rem;
  background: var(--button-bg);
  color: var(--button-fg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast);
}
.joram :is(button, .btn):hover { background: var(--button-bg-hover); color: var(--button-fg-hover); border-color: var(--button-hover-border); }
.joram :is(button, .btn):active { background: var(--button-bg-press); transform: translateY(1px); }
.joram :is(button, .btn):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.joram .btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-fg);
  border-color: var(--button-secondary-border);
}
.joram .btn-secondary:hover { background: var(--button-secondary-border); color: var(--button-fg); border-color: transparent; }

.joram .btn-accent,
.joram .btn-cta {
  background: var(--cta-bg);
  color: var(--cta-fg);
}
.joram .btn-accent:hover,
.joram .btn-cta:hover { background: color-mix(in oklch, var(--cta-bg) 88%, black); color: var(--cta-fg); }

/* ============================================================
   Joram — Brand Guidelines site chrome
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; }

/* ---------- Layout shell ---------- */
.shell { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  background: var(--bg);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 40px;
  height: 72px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.brandblock { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-right: 16px; }
.brandblock img { width: 32px; height: 32px; flex: none; }
.brandblock .word { font: 600 22px/1 var(--font-heading); letter-spacing: 0.01em; color: var(--fg-strong); }
.brandblock .sub { font: 600 9px/1 var(--font-body); letter-spacing: 0.24em; color: var(--fg-muted); margin-top: 4px; text-transform: uppercase; }

/* ---------- Horizontal nav + dropdowns ---------- */
.nav { display: flex; flex-direction: row; align-items: center; gap: 0; flex: 1; }
.nav-group { position: relative; }

.nav-group > .grp-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 12px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.nav-group > .grp-title:hover { color: var(--fg-strong); background: var(--button-secondary-bg-hover); }
.nav-group > .grp-title i { font-size: 14px; transition: transform var(--duration-fast) var(--ease-standard); }
.nav-group > .grp-title.active { color: var(--accent); }

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: var(--shadow-md);
  flex-direction: column;
  gap: 2px;
  z-index: 100;
}
@media (min-width: 961px) {
  .nav-group:hover > .grp-title i,
  .nav-group:focus-within > .grp-title i { transform: rotate(180deg); }
  .nav-group:hover .dropdown,
  .nav-group:focus-within .dropdown { display: flex; }
}

.nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/1.3 var(--font-body);
  color: var(--fg-muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.nav a:hover { color: var(--fg-strong); background: var(--button-secondary-bg-hover); }
.nav a.active {
  color: var(--fg-strong);
  font-weight: 600;
  background: var(--button-secondary-bg-hover);
}

/* ---------- Topbar right actions ---------- */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
/* ---------- Topbar action buttons (home, lang, theme) ---------- */
.topbar-actions .topbar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; width: 36px; box-sizing: border-box;
  color: var(--fg);
  background: var(--button-secondary-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding: 0;
  transition: background var(--duration-fast) var(--ease-standard);
}
.topbar-actions .topbar-btn:hover { background: var(--button-secondary-bg-hover); }
.topbar-actions .topbar-btn i { font-size: 15px; }
.topbar-actions a.topbar-btn { text-decoration: none; }
.topbar-actions a.topbar-btn:hover { text-decoration: none; }

/* ---------- Language switcher ---------- */
.lang-switcher { position: relative; }

.lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 200;
  min-width: 110px;
}
.lang-dropdown[hidden] { display: none; }
.lang-dropdown button {
  display: block; width: 100%;
  padding: 9px 16px;
  font: 600 12px/1 var(--font-body);
  text-align: left;
  background: transparent;
  color: var(--fg);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.lang-dropdown button:hover { background: var(--button-secondary-bg-hover); }
.lang-dropdown button[data-active] { color: var(--accent); }

/* ---------- Main column ---------- */
.main { min-width: 0; padding: 0 0 200px; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 96px; }

/* Cover / hero */
.cover { padding: 180px 0 0; }
.cover .eyebrow {
  font: var(--overline); text-transform: uppercase;
  letter-spacing: var(--tracking-overline); color: var(--fg-muted);
  display: block; margin-bottom: 56px;
}
.cover h1 { font: var(--display-1); letter-spacing: var(--tracking-heading); margin: 0 0 52px; font-feature-settings: var(--font-features-heading); }
.cover .lede { font: 500 clamp(1.6rem, 1.2vw + 1rem, 2.2rem)/1.25 var(--font-heading); color: var(--fg); max-width: 18ch; margin: 0 0 140px; }
.cover .lede em { font-style: italic; }
.cover .metarow { display: flex; flex-wrap: wrap; gap: 64px; padding-top: 56px; border-top: 1px solid var(--border); }
.cover .metarow .m { display: flex; flex-direction: column; gap: 4px; }
.cover .metarow .m .k { font: 600 10px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }
.cover .metarow .m .v { font: 400 14px/1.4 var(--font-body); color: var(--fg); }
.cover .cover-bio { max-width: 640px; font: var(--body); color: var(--fg-muted); margin: 0; padding: 56px 0 120px; border-bottom: 1px solid var(--border); }

/* Section */
.section { padding: 120px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 24px; }
.section:last-child { border-bottom: 0; }
.section > header { margin-bottom: 60px; }
.section .sec-num { font: 600 12px/1 var(--font-body); letter-spacing: 0.18em; color: var(--accent); display: block; margin-bottom: 20px; }
.section h2 { font: var(--h2); letter-spacing: var(--tracking-heading); margin: 0 0 20px; font-feature-settings: var(--font-features-heading); }
.section .sec-desc { font: var(--body-lg); color: var(--fg-muted); max-width: 60ch; margin: 0; }

.subsection { margin-top: 88px; }
.subsection:first-of-type { margin-top: 64px; }
.subhead { font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 32px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

/* Specimen + code grouping */
.spec { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.spec .stage { padding: 56px 64px; }
.spec .stage.tight { padding: 40px 48px; }
.spec .stage.flush { padding: 0; }

/* Dual light/dark specimen split */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo > div { padding: 56px 64px; }
.duo .lite { background: var(--color-baby-powder); color: var(--color-oxford-blue); }
.duo .drk  { background: var(--color-ink-black); color: var(--color-baby-powder); }
.duo .mode-tag { font: 600 10px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; display: block; margin-bottom: 28px; }

/* ---------- Code panel ---------- */
.code {
  border-top: 1px solid var(--border);
  background: var(--code-bg, #0d1530);
  color: var(--code-fg, #e7ecf5);
  font: 400 13px/1.7 var(--font-mono);
}
.code .bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.code .bar .fname { font: 600 11px/1 var(--font-mono); letter-spacing: 0.04em; color: rgba(231,236,245,0.62); }
.code .bar .fname i { margin-right: 7px; opacity: 0.7; }
.code .copy {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-body); letter-spacing: 0.02em;
  color: rgba(231,236,245,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  padding: 6px 11px; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast), transform var(--duration-fast);
}
.code .copy:hover { background: rgba(255,255,255,0.12); color: #fff; }
.code .copy:active { background: rgba(255,255,255,0.18); transform: translateY(1px); }
.code .copy:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }
.code .copy.done { color: var(--color-madder-dark); }
.code pre { margin: 0; padding: 20px 22px; overflow-x: auto; }
.code code { font: inherit; white-space: pre; }

/* code token colors — tuned for the dark code surface */
.t-c { color: #6b7794; font-style: italic; }      /* comments */
.t-v { color: #f0a4b0; }                            /* --custom-props */
.t-p { color: #9db4f0; }                            /* property names */
.t-n { color: #d9b08c; }                            /* hex / numbers */
.t-s { color: #b9d9b0; }                            /* strings */
.t-at { color: #c9a6e0; }                           /* at-rules */

/* Caption under spec */
.spec-caption { font: var(--caption); color: var(--fg-muted); padding: 16px 28px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.spec-caption b { color: var(--fg); font-weight: 600; }

/* Notes / callouts */
.note { font: var(--body); color: var(--fg-muted); max-width: 62ch; margin: 36px 0 0; }
.note strong { color: var(--fg); font-weight: 600; }
.rule-pill { display: inline-block; font: 600 11px/1 var(--font-body); letter-spacing: 0.04em; color: var(--accent); background: color-mix(in oklch, var(--accent) 10%, transparent); border-radius: var(--radius-pill); padding: 5px 11px; margin-top: 20px; }

/* ============================================================
   Specimen-internal component styles (mirror the real tokens)
   ============================================================ */

/* Color swatches */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sw { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.sw .chip { height: 96px; display: block; padding: 0; border: none; border-radius: 0; }
.sw .meta { padding: 18px 20px; background: var(--bg-elevated); }
.sw .nm { font: 600 14px/1.2 var(--font-body); color: var(--fg); }
.sw .hx { font: 500 11px/1.4 var(--font-mono); color: var(--fg-muted); margin-top: 3px; letter-spacing: 0.02em; }
.sw .rl { font: 300 12px/1.4 var(--font-body); color: var(--fg-muted); margin-top: 6px; }

/* Semantic token rows */
.tokpanels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tokpanel { border-radius: var(--radius-md); padding: 36px 40px; border: 1px solid var(--border); }
.tokpanel.lt { background: var(--color-baby-powder); color: var(--color-oxford-blue); }
.tokpanel.dk { background: var(--color-ink-black); color: var(--color-baby-powder); border-color: rgba(172,166,187,0.24); }
.tokpanel h4 { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 24px; opacity: 0.7; }
.tokrow { display: flex; align-items: center; gap: 11px; padding: 7px 0; font: 400 13px/1.4 var(--font-body); }
.tokrow .dot { width: 18px; height: 18px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,0.14); }
.tokpanel.dk .tokrow .dot { border-color: rgba(255,255,255,0.18); }
.tokrow .nm { flex: 1; }
.tokrow .vl { font: 500 11px/1 var(--font-mono); opacity: 0.7; }

/* AAA pairings */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pair { border-radius: var(--radius-md); padding: 28px 32px; display: flex; flex-direction: column; gap: 8px; border: 1px solid transparent; }
.pair .on { font: 500 10px/1 var(--font-mono); opacity: 0.6; letter-spacing: 0.04em; }
.pair .samples { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.pair .samples span { font-size: 14px; }
.pair .samples .h { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 1; }
.pair .aaa { font: 600 9px/1 var(--font-body); letter-spacing: 0.12em; opacity: 0.55; margin-top: 2px; }

/* Type specimens */
.typerow { display: flex; align-items: baseline; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.typerow:last-child { border-bottom: 0; }
.typerow .tag { font: 600 10px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); width: 120px; flex: none; }
.typerow .specimen-t { font-family: var(--font-heading); color: var(--fg); letter-spacing: -0.01em; line-height: 1.05; }
.typerow .meta { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--fg-muted); white-space: nowrap; }
.typerow .it { font-style: italic; }

.bodyrow { padding: 22px 0; border-bottom: 1px solid var(--border); }
.bodyrow:last-child { border-bottom: 0; }
.bodyrow .tag { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); display: inline-block; margin-bottom: 8px; }
.bodyrow .meta { font: 500 11px/1 var(--font-mono); color: var(--fg-muted); float: right; }
.bodyrow p { margin: 0; max-width: 62ch; color: var(--fg); }
.b-lg { font: 300 18px/1.6 var(--font-body); }
.b-md { font: 300 16px/1.6 var(--font-body); }
.b-md strong { font-weight: 400; }
.b-emph { font: 400 16px/1.6 var(--font-body); }
.b-cap { font: 400 12px/1.4 var(--font-body); color: var(--fg-muted); }
.b-over { font: 600 12px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); }

/* Pairing-in-use specimen */
.pairing .overline { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); margin: 0 0 14px; }
.pairing h3 { font: 800 clamp(2rem, 1.5vw + 1rem, 2.75rem)/1.05 var(--font-heading); letter-spacing: -0.01em; color: var(--fg); margin: 0 0 16px; max-width: 16ch; font-feature-settings: var(--font-features-heading); }
.pairing .hr { width: 56px; height: 1px; background: var(--fg); opacity: 0.4; margin: 28px 0; }
.pairing p { font: 400 16px/1.65 var(--font-body); color: var(--fg); margin: 0; max-width: 56ch; }

/* Spacing scale */
.scale { display: flex; flex-direction: column; gap: 10px; }
.scale .row { display: grid; grid-template-columns: 110px 70px 1fr; gap: 18px; align-items: center; }
.scale .nm { font: 600 12px/1 var(--font-mono); color: var(--fg); }
.scale .px { font: 500 11px/1 var(--font-mono); color: var(--fg-muted); }
.scale .bar { height: 16px; background: var(--accent); border-radius: 2px; }

/* Radii + shadows tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile-rs { background: var(--bg-elevated); border: 1px solid var(--border); padding: 18px; height: 104px; display: flex; flex-direction: column; justify-content: flex-end; }
.tile-rs .n { font: 600 11px/1 var(--font-body); color: var(--fg); }
.tile-rs .v { font: 500 10px/1.3 var(--font-mono); color: var(--fg-muted); margin-top: 5px; }

/* Buttons specimen */
.btns { display: flex; flex-direction: column; gap: 18px; }
.btns .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btns .lbl { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; width: 88px; flex: none; opacity: 0.7; }
.demo-btn { font: 600 14px/1 var(--font-body); padding: 12px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.demo-btn:active { transform: translateY(1px); }
.demo-btn:focus-visible { outline: 2px solid; outline-offset: 3px; }
.dbtn-note { font: 400 12px/1.45 var(--font-body); max-width: 240px; opacity: 0.7; }

/* light btns */
.demo-btn.bp { background: var(--color-oxford-blue); color: var(--color-baby-powder); outline-color: var(--color-madder); }
.demo-btn.bs { background: transparent; color: var(--color-oxford-blue); border-color: var(--color-oxford-blue); outline-color: var(--color-madder); }
.demo-btn.ba { background: var(--color-madder); color: var(--color-baby-powder); outline-color: var(--color-madder); }
.demo-btn.bg-ghost { background: transparent; color: var(--color-oxford-blue); outline-color: var(--color-madder); }
.demo-btn.bp:hover { background: var(--color-baby-powder); color: var(--color-oxford-blue); border-color: var(--color-oxford-blue); }
.demo-btn.bs:hover { background: var(--color-oxford-blue); color: var(--color-baby-powder); border-color: transparent; }
.demo-btn.ba:hover { background: var(--color-baby-powder); color: var(--color-madder); border-color: var(--color-madder); }
.demo-btn.bg-ghost:hover { color: var(--color-madder); }
.bsm { padding: 8px 14px; font-size: 12px; }
.blg { padding: 16px 28px; font-size: 16px; }
.bdis { opacity: 0.4; cursor: not-allowed; }
/* dark btns */
.demo-btn.dp { background: var(--color-rose-quartz); color: var(--color-oxford-blue); outline-color: var(--color-madder-dark); }
.demo-btn.ds { background: transparent; color: var(--color-baby-powder); border-color: var(--color-rose-quartz); outline-color: var(--color-madder-dark); }
.demo-btn.dcta { background: var(--color-madder-dark); color: var(--color-ink-black); outline-color: var(--color-madder-dark); }
.demo-btn.dghost { background: transparent; color: var(--color-baby-powder); outline-color: var(--color-madder-dark); }
.demo-btn.dp:hover { background: var(--color-ink-black); color: var(--color-rose-quartz); border-color: var(--color-rose-quartz); }
.demo-btn.ds:hover { background: var(--color-rose-quartz); color: var(--color-oxford-blue); border-color: transparent; }
.demo-btn.dcta:hover { background: var(--color-ink-black); color: var(--color-madder-dark); border-color: var(--color-madder-dark); }
.demo-btn.dghost:hover { color: var(--color-madder-dark); }

/* Badges */
.badge-rows { display: flex; flex-direction: column; gap: 16px; }
.badge-rows .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge-rows .lbl { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; width: 96px; flex: none; opacity: 0.7; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font: 600 11px/1.3 var(--font-body);
  background: color-mix(in oklch, var(--color-oxford-blue) 7%, transparent);
  color: var(--color-oxford-blue); white-space: nowrap;
}
.pill.outline { background: transparent; border: 1px solid var(--border-strong); }
.pill.solid { background: var(--color-oxford-blue); color: var(--color-baby-powder); }
.pill.warn { background: var(--color-madder); color: var(--color-baby-powder); }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.dot.ok::before { background: var(--color-oxford-blue); }
.pill.dot.alert::before { background: var(--color-madder); }

/* Forms */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font: 600 12px/1 var(--font-body); color: var(--fg); }
.field input, .field textarea, .field select {
  font: 400 14px/1.4 var(--font-body); color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 12px; outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--color-oxford-blue);
  box-shadow: none;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.field.err input { border-color: var(--color-madder); }
.field.err .msg { font: 500 11px/1.3 var(--font-body); color: var(--color-madder); }
.check { display: flex; align-items: center; gap: 8px; font: 400 13px/1.4 var(--font-body); color: var(--fg); }
.check input { width: 16px; height: 16px; accent-color: var(--color-oxford-blue); }

/* Service cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.scard {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.scard:hover { box-shadow: var(--shadow-md); }
.scard .ic { color: var(--fg); font-size: 24px; }
.scard h3 { font: 600 22px/1.15 var(--font-heading); color: var(--fg); margin: 0; letter-spacing: -0.01em; font-feature-settings: var(--font-features-heading); }
.scard p { font: 400 14px/1.55 var(--font-body); color: var(--fg-muted); margin: 0; }
.scard .meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font: 500 12px/1 var(--font-body); color: var(--fg-muted); }
.scard .meta .pill { font-size: 11px; }
.scard-head { display: flex; align-items: center; gap: 10px; }

/* Iconography */
.icongrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.icell { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--fg); padding: 14px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); }
.icell i { font-size: 24px; }
.icell span { font: 500 10px/1 var(--font-body); color: var(--fg-muted); }
.icon-sizes { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.icon-sizes .iz { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--fg); }
.icon-sizes .iz span { font: 500 11px/1 var(--font-mono); color: var(--fg-muted); }

/* Voice & tone */
.voice { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.voice .col { display: flex; flex-direction: column; gap: 12px; }
.voice h4 { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; margin: 0; }
.voice h4.yes { color: var(--fg); }
.voice h4.no { color: var(--accent); }
.quote { font: 500 17px/1.4 var(--font-heading); color: var(--fg); padding: 12px 16px; border-left: 2px solid var(--fg); background: var(--bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; box-shadow: var(--shadow-xs); }
.quote.bad { border-left-color: var(--color-madder); opacity: 0.85; }
.voice .vnote { font: 400 12px/1.5 var(--font-body); color: var(--fg-muted); margin: 4px 0 0; }
.voice .vnote.bad { color: var(--color-madder); opacity: 0.85; }

/* Inline link decoration */
a.link { text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-thickness: 2.75px; }
a.link:visited { text-decoration: underline dashed; text-decoration-thickness: 50%; }
a.link:focus, a.link:hover, a.link:active { text-decoration: underline wavy; text-underline-offset: 2px; }

/* Contrast ratio badge (AAA pairings) */
.cr-badge { font: 600 10px/1 var(--font-mono); opacity: 0.65; margin-left: 6px; letter-spacing: 0.04em; }

/* Portrait */
.portrait { display: flex; gap: 48px; align-items: center; }
.portrait img { width: 150px; height: 150px; object-fit: cover; border-radius: var(--radius-sm); flex: none; filter: grayscale(0.15) contrast(1.02); }
.portrait .nm { font: 600 26px/1.1 var(--font-heading); margin: 0 0 2px; color: var(--fg); }
.portrait .role { font: 400 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.18em; color: var(--fg-muted); margin-bottom: 14px; }
.portrait .pnote { font: 300 13px/1.55 var(--font-body); color: var(--fg-muted); max-width: 38ch; }

/* Logo / wordmark specimen */
.logo-duo { display: grid; grid-template-columns: 1fr 1fr; }
.logo-duo > div { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.logo-duo .lt { background: var(--color-baby-powder); }
.logo-duo .dk { background: var(--color-ink-black); }
.logo-duo img { width: 56%; height: auto; }
.wordmark-duo { display: grid; grid-template-columns: 1fr 1fr; }
.wordmark-duo .lt { background: var(--color-baby-powder); }
.wordmark-duo .dk { background: var(--color-ink-black); }
.wordmark-duo > div { display: flex; align-items: center; justify-content: center; padding: 64px; gap: 18px; }
.wordmark-duo .mk { width: 76px; height: 76px; }
.wordmark-duo .wm { font: 600 46px/1 var(--font-heading); letter-spacing: 0.01em; }
.wordmark-duo .lt .wm { color: var(--color-oxford-blue); }
.wordmark-duo .dk .wm { color: var(--color-baby-powder); }
.wordmark-duo .ws { font: 600 9px/1 var(--font-body); letter-spacing: 0.24em; margin-top: 6px; text-transform: uppercase; }
.wordmark-duo .lt .ws { color: color-mix(in oklch, var(--color-oxford-blue) 70%, transparent); }
.wordmark-duo .dk .ws { color: var(--color-rose-quartz); }

.donts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.dont { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-elevated); }
.dont .dstage { aspect-ratio: 1; display: grid; place-items: center; position: relative; padding: 22px; background: var(--color-baby-powder); }
.dont .dstage::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: var(--color-madder); transform: rotate(-12deg); }
.dont .dstage img { max-width: 68%; max-height: 68%; }
.dont .dlabel { padding: 11px 14px; font: var(--caption); border-top: 1px solid var(--border); color: var(--fg-muted); }
.dont .dlabel b { color: var(--color-madder); font-weight: 600; }

/* download chips */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font: 500 12px/1 var(--font-body); color: var(--fg); text-decoration: none; transition: background var(--duration-fast); }
.chip:hover { background: var(--button-secondary-bg-hover); }
.chip i { font-size: 14px; }

/* mobile nav toggle — hidden on desktop */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--fg);
}
.menu-btn i { font-size: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .wrap { padding: 0 64px; }
  .icongrid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 960px) {
  .topbar-inner { padding: 0 24px; }
  .topbar .nav {
    position: fixed;
    top: 64px;
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 39;
    display: none;
    flex-direction: column;
    padding: 8px 16px 16px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .topbar.nav-open .nav { display: flex; }
  .menu-btn { display: inline-flex; }
  .topbar-actions { gap: 8px; }
  .theme-toggle span { display: none; }

  /* on mobile, dropdowns are static (part of the flow) */
  .nav-group { width: 100%; }
  .nav-group > .grp-title { width: 100%; border-radius: var(--radius-sm); }
  .dropdown {
    position: static;
    display: flex;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 4px 16px;
    background: none;
    gap: 0;
  }
  .nav-group:not(.open) .dropdown { display: none; }
  .nav-group.open .dropdown { display: flex; }
  .nav-group:not(.open) > .grp-title i { transform: none; }
  .nav-group.open > .grp-title i { transform: rotate(180deg); }

  .cover { padding-top: 72px; padding-bottom: 72px; }
  .duo, .tokpanels, .pairs, .voice, .cards, .formgrid, .logo-duo, .wordmark-duo { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .donts { grid-template-columns: repeat(2, 1fr); }
  .icongrid { grid-template-columns: repeat(4, 1fr); }
  .portrait { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 28px; }
  .typerow { flex-wrap: wrap; gap: 8px; }
  .typerow .meta { margin-left: 0; }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Scrim for mobile nav */
.scrim { display: none; }
@media (max-width: 960px) {
  .scrim.show { display: block; position: fixed; inset: 0; background: rgba(10,17,55,0.2); z-index: 35; }
}