/* ============================================================
   Wojtek Staszczyk — Design System Tokens
   V2 Warm Editorial — aligned with brand-design-system.md
   Applied to case study pages via ../colors_and_type.css
   ============================================================ */

/* --- Fonts (Google Fonts) ----------------------------------
   Chivo: humanist grotesque — warm character, real italics
   Inter: precision sans for body / functional copy
   JetBrains Mono: code / stamp labels
   Loaded via <link rel="preload"> in each case study HTML.
   @import removed to avoid render-blocking CSS chain.
   ----------------------------------------------------------- */

/* Tokens moved to tokens.css (2026-07-13, RUI-04).
   Link tokens.css BEFORE this file on every page. */

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-feature-settings: "ss01", "cv02", "cv11";
}

.display-xl, .display-lg, .display-md {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--fg-1);
  font-feature-settings: "ss01","ss02";
}
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-snug); }

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
  font-feature-settings: "ss01","ss02";
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--fg-1);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  max-width: var(--prose-max);
  text-wrap: pretty;
}
.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  font-feature-settings: "ss01","ss02";
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-accent);
}

.meta, small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg-2);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--bg-muted);
  padding: 0.12em 0.35em;
  border-radius: var(--radius-2);
  color: var(--accent-label);
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--fg-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent-strong); }

::selection { background: var(--border-accent); color: var(--fg-1); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-2);
}


/* ============================================================
   CASE-STUDY CHROME  (hoisted 2026-08-31)
   The four case studies scope their header as `header.bar nav ...`
   and carry their own footer padding and type sizes. Kept here
   rather than in chrome.css because this file is loaded ONLY by
   those four pages, so these higher-specificity selectors cannot
   leak onto the rest of the site.
   ============================================================ */
.cs-top {position:sticky; top:0; z-index:50;}
.cs-top header.bar {position:static; z-index:auto;}
.ft-col {font-family:var(--font-serif);font-style:italic;font-size:.875rem;color:var(--fg-2);}
.ft-copy {font-family:var(--font-sans);font-size:.75rem;color:var(--fg-3);letter-spacing:.04em;}
footer nav a {color:var(--linen-200);text-decoration:none;}
header.bar .bar-inner {max-width:1240px;margin:0 auto;padding:.9rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;}

/* NOTE: the case studies colour the CV button's label with --linen-50
   (paper) where the main pages use --cream. A 5-unit difference, almost
   certainly unintended drift. Left as-is: normalising it is a visible
   change and belongs with the other case-study inconsistencies, not
   hidden inside a token refactor. Revisit with the type-scale fix. */
header.bar nav .nav-cv {background:var(--btn-primary-bg);color:var(--btn-primary-fg);padding:.5rem .95rem;border-radius:6px;letter-spacing:.08em;border:1.5px solid var(--btn-primary-bg);display:inline-flex;align-items:center;line-height:1;text-decoration:none;}
header.bar nav .nav-cv:hover {background:var(--fg-accent);color:var(--fg-on-accent);border-color:var(--fg-accent);}
header.bar nav a {font-family:var(--font-sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--fg-2);text-decoration:none;transition:color .2s;}
header.bar nav a:hover,header.bar nav a.active {color:var(--fg-accent);}
header.bar,.cs-top {transition: transform .28s ease; will-change: transform;}
header.bar.bar-hidden,.cs-top.bar-hidden {transform: translateY(-100%);}

@media (max-width: 720px) {
  footer nav {display:none;}
  header.bar .bar-inner {padding:.9rem 1.5rem;}
  header.bar nav a:not(.nav-cv) {display:none;}
}