/* ==========================================================================
   DESIGN TOKENS — SEBASTIAN WINZKER / winzker.net
   Type + space discipline modelled on adamhickey.com (14-step scale, four
   fluid ramps, leading/tracking as functions of size, fixed 4→48 ladder then
   fluid bands). Palette: forest green, sand gold, ivory, charcoal slate.
   ========================================================================== */

:root {
  /* ---- Grounds ---- */
  --bg-white: #FFFFFF;
  --bg-warm: #FAFAF6;
  --bg-subtle: #F2F2ED;
  --bg-dark: #181C19;          /* charcoal slate: voxel band ground */
  --bg-dark-surface: #1F2622;

  /* ---- Ink on light grounds (all ≥ 4.5:1 on white) ---- */
  --ink-primary: #151815;
  --ink-secondary: #3E423E;
  --ink-muted: #5F645F;
  --ink-faint: #8A8F8A;        /* non-text only: rules, icons */

  /* ---- Ink on dark grounds ---- */
  --ink-on-dark: #EDE7D3;
  --ink-on-dark-secondary: rgba(237, 231, 211, 0.76);
  --ink-on-dark-muted: rgba(237, 231, 211, 0.60);
  --rule-on-dark: rgba(237, 231, 211, 0.14);
  --rule-on-dark-strong: rgba(237, 231, 211, 0.40);
  --wash-on-dark: rgba(237, 231, 211, 0.06);
  --wash-on-dark-hover: rgba(237, 231, 211, 0.12);

  /* ---- Brand ---- */
  --brand-green-deep: #0F2D14;
  --brand-green-accent: #19451F;   /* text accent on light: 10.6:1 */
  --brand-green-sage: #526E4F;     /* fills, rules, ≥ 3:1 non-text; 5.1:1 text ≥ 14px */
  --brand-green-tint: #EEF4EE;
  --brand-gold: #C2B280;           /* fill / on dark only, never small text on white */
  --brand-gold-deep: #8A7A45;      /* gold as text on light: 4.6:1 */
  --brand-gold-tint: #F7F4EA;
  --brand-ivory: #EDE7D3;
  --scrim: #121512;

  /* ---- Lines & washes on light ---- */
  --rule-hairline: rgba(21, 24, 21, 0.10);
  --rule-strong: rgba(21, 24, 21, 0.16);
  --wash-hover: rgba(21, 24, 21, 0.06);
  --ring: color-mix(in srgb, var(--brand-green-sage) 22%, transparent);

  /* ---- Families ---- */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale: text tier arithmetic, display tier geometric (2^(1/4)) ---- */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.75rem;    /* 28 */
  --text-4xl: 2.125rem;   /* 34 */
  --text-5xl: 2.5rem;     /* 40 */
  --text-6xl: 3rem;       /* 48 */
  --text-7xl: 3.5rem;     /* 56 */
  --text-8xl: 4.25rem;    /* 68 */

  /* ---- Fluid ramps ---- */
  --type-title:        clamp(2.125rem, calc(2.125rem + 2.125 * (100vw - 25rem) / 55), 4.25rem); /* 34→68 stacked h1 */
  --type-title-inset:  clamp(2.25rem,  calc(2.25rem  + 1.875 * (100vw - 48rem) / 32), 4.125rem); /* 36→66 h1 beside portrait/visual */
  --type-section:      clamp(1.75rem,  calc(1.75rem  + 1.25  * (100vw - 25rem) / 55), 3rem);    /* 28→48 h2 */
  --type-subsection:   clamp(1.5rem,   calc(1.5rem   + 0.625 * (100vw - 25rem) / 55), 2.125rem);/* 24→34 h3 */
  --type-lede:         clamp(1.125rem, calc(1.125rem + 0.375 * (100vw - 25rem) / 55), 1.5rem);  /* 18→24 */

  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-tight: 1.35;
  --leading-ui: 1.45;
  --leading-body: 1.6;
  --leading-reading: 1.7;

  --tracking-display: -0.02em;
  --tracking-title: -0.015em;
  --tracking-heading: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;
  --tracking-caps: 0.12em;

  --measure: 52ch;

  /* ---- Space: fixed ladder to 48, fluid bands above ---- */
  --space-2xs: 0.25rem;   /* 4 */
  --space-xs: 0.5rem;     /* 8 */
  --space-sm: 0.75rem;    /* 12 */
  --space-md: 1rem;       /* 16 */
  --space-lg: 1.25rem;    /* 20 */
  --space-xl: 1.5rem;     /* 24 */
  --space-2xl: 2rem;      /* 32 */
  --space-3xl: 2.5rem;    /* 40 */
  --space-4xl: 3rem;      /* 48 */
  --space-block:      clamp(3rem, calc(3rem + 1.5 * (100vw - 25rem) / 55), 4.5rem); /* 48→72 */
  --space-section:    clamp(4rem, calc(4rem + 2 * (100vw - 25rem) / 55), 6rem);     /* 64→96 */
  --space-section-lg: clamp(5rem, calc(5rem + 3 * (100vw - 25rem) / 55), 8rem);     /* 80→128 */
  --gutter:           clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 25rem) / 55), 2rem); /* 24→32 */

  --container-max: 1280px;
  --container-narrow: 880px;
  --nav-height: 80px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-resting: 0 1px 8px rgba(0, 0, 0, 0.06);
  --shadow-media: 0 8px 24px rgba(15, 45, 20, 0.08);
  --shadow-lift: 0 24px 48px rgba(15, 45, 20, 0.16);
  --shadow-lift-sm: 0 6px 14px rgba(15, 45, 20, 0.16);
  --shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.14);
  --shadow-lightbox: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-response: 80ms;
  --motion-state: 200ms;
  --motion-move: 300ms;
  --motion-enter: 500ms;
  --motion-ambient: 1000ms;
  --motion-rise: 20px;
  --motion-lift: 1.03;
  --motion-press: 0.985;
  --motion-stagger: 60ms;
}

@media (max-width: 767.98px) {
  :root { --text-2xs: 0.75rem; --text-xs: 0.8125rem; }
}