/* ============================================================
   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) ----------------------------------
   Fraunces: variable serif — optical size + SOFT axis
   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.
   ----------------------------------------------------------- */

:root {
  /* ---------- COLOR: WARM NEUTRAL FOUNDATION ------------- */
  --linen-50:  #FAF7F0;  /* paper / page bg */
  --linen-100: #F5F1EA;  /* primary cream bg (matches --cream) */
  --linen-200: #EDE6D8;  /* secondary / card bg (matches --cream-2) */
  --linen-300: #D9D1C0;  /* border / hairline (matches --line) */
  --linen-400: #9A8471;  /* lighter muted */
  --linen-500: #6B6357;  /* muted text / meta (matches --muted) */

  --ink-900: #1A1815;    /* primary text (matches --ink) */
  --ink-800: #3A352E;    /* soft ink (matches --ink-soft) */
  --ink-700: #4A3D34;
  --ink-600: #5C4E45;

  /* ---------- COLOR: ACCENT (the "20%") ------------------- */
  /* V2: warm rust / terracotta (web accent from brand-design-system.md) */
  --copper-50:  #F9EAE4;
  --copper-100: #F0C9BB;
  --copper-300: #D08070;
  --copper-500: #B8451D;  /* PRIMARY ACCENT — matches --accent */
  --copper-600: #8C2F12;  /* hover (matches --accent-2) */
  --copper-700: #6B2410;
  --copper-900: #3A1208;

  /* Legacy aliases — case study pages reference terra-* */
  --terra-50:  var(--copper-50);
  --terra-100: var(--copper-100);
  --terra-300: var(--copper-300);
  --terra-500: var(--copper-500);
  --terra-600: var(--copper-600);
  --terra-700: var(--copper-700);
  --terra-900: var(--copper-900);

  /* ---------- COLOR: SEMANTIC ---------------------------- */
  --success: #5A7A3E;
  --warning: #C28A2C;
  --danger:  #B8412E;
  --info:    #5C6B7A;

  /* ---------- FG / BG / BORDER -------------------------- */
  --bg-canvas:   var(--linen-100);   /* #f5f1ea — main cream */
  --bg-surface:  var(--linen-50);    /* #faf7f0 — paper/cards */
  --bg-muted:    var(--linen-200);   /* #ede6d8 — recessed */
  --bg-inverse:  var(--ink-900);     /* #1a1815 — dark sections */

  --fg-1: var(--ink-900);
  --fg-2: var(--linen-500);
  --fg-3: var(--linen-400);
  --fg-accent: var(--copper-500);
  --fg-on-accent: var(--linen-50);
  --fg-on-dark: var(--linen-100);

  --border-hairline: var(--linen-300);
  --border-strong:   var(--linen-400);

  /* ---------- TYPE: FAMILIES ----------------------------- */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE: SCALE -------------------------------- */
  --fs-display-xl: clamp(3.5rem, 7vw, 6rem);
  --fs-display-lg: clamp(2.5rem, 5vw, 4.5rem);
  --fs-display-md: clamp(2rem, 3.5vw, 3rem);
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.1875rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  /* ---------- TYPE: WEIGHTS ------------------------------ */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- TYPE: LEADING / TRACKING ------------------- */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ---------- SPACING (8px base) ------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- LAYOUT: 80/20 RATIO GRID ------------------- */
  --col-wide: 80fr;
  --col-narrow: 20fr;
  --content-max: 72rem;
  --prose-max: 40rem;

  /* ---------- RADII -------------------------------------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-4: 16px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (warm-tinted) ---------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26,24,21,0.04), 0 1px 1px rgba(26,24,21,0.03);
  --shadow-2: 0 2px 8px rgba(26,24,21,0.06), 0 1px 2px rgba(26,24,21,0.04);
  --shadow-3: 0 8px 24px rgba(26,24,21,0.08), 0 2px 4px rgba(26,24,21,0.04);
  --shadow-focus: 0 0 0 3px rgba(184,69,29,0.24);

  /* ---------- MOTION ------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-entry:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   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: var(--fs-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  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(--terra-700);
}

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

::selection { background: var(--copper-100); color: var(--ink-900); }

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