/*
 * Kim Washburn design tokens. The single source of truth for every raw value.
 *
 * Rule: colors (hex/rgb/hsl) appear ONLY in this file. components.css and
 * site.css reference these custom properties; `npm test` (stylelint) fails
 * otherwise. See design-system/DESIGN.md for usage guidance.
 *
 * Fluid values interpolate linearly between a 390px phone and a 1440px
 * desktop, matching the two boards in the original design canvas.
 */

:root {
  /* ---------------------------------------------------------------------
   * Brand palette (from the design canvas, do not edit casually)
   * ------------------------------------------------------------------- */
  --kw-cream: #f5f0e7;
  --kw-sand: #e8e0d2;
  --kw-forest: #173f35;
  --kw-oxblood: #713b3b;
  --kw-gold: #a88757;
  --kw-ink: #20211f;

  /* Text-safe gold variants. The brand gold is 2.95:1 on cream, below WCAG
   * AA for small text, so gold *text* uses these same-hue variants instead. */
  --kw-gold-on-light: #836944; /* 4.53:1 on cream */
  --kw-gold-on-dark: #b99e77; /* 4.56:1 on forest */

  /* ---------------------------------------------------------------------
   * Semantic color roles: use these in components, not the palette above
   * ------------------------------------------------------------------- */
  --color-bg: var(--kw-cream);
  --color-surface-alt: var(--kw-sand);
  --color-surface-dark: var(--kw-forest);
  --color-surface-ink: var(--kw-ink);

  --color-text: var(--kw-ink);
  --color-text-soft: color-mix(in srgb, var(--kw-ink) 82%, transparent); /* 8.3:1 */
  --color-text-muted: color-mix(in srgb, var(--kw-ink) 68%, transparent); /* 5.3:1 */
  --color-text-subtle: color-mix(in srgb, var(--kw-ink) 65%, transparent); /* 4.8:1, was 55% in design */

  --color-brand: var(--kw-forest);
  --color-accent: var(--kw-oxblood); /* italic asides, links */
  --color-eyebrow: var(--kw-gold-on-light);
  --color-highlight-on-dark: var(--kw-gold-on-dark);

  --color-on-dark: var(--kw-cream);
  --color-on-dark-soft: color-mix(in srgb, var(--kw-cream) 85%, transparent);
  --color-on-ink-heading: var(--kw-sand);
  --color-on-ink-muted: color-mix(in srgb, var(--kw-cream) 55%, transparent);
  --color-on-ink-fine: color-mix(in srgb, var(--kw-cream) 50%, transparent); /* was 35% in design */

  --color-border: color-mix(in srgb, var(--kw-ink) 10%, transparent);
  --color-border-strong: color-mix(in srgb, var(--kw-ink) 18%, transparent);
  --color-border-brand: color-mix(in srgb, var(--kw-forest) 12%, transparent);
  --color-divider: color-mix(in srgb, var(--kw-oxblood) 35%, transparent);
  --color-focus: var(--kw-oxblood);

  --color-action: var(--kw-forest);
  --color-action-hover: var(--kw-ink);
  --color-on-action: var(--kw-cream);

  --gradient-hero: linear-gradient(180deg, var(--kw-cream) 0%, var(--kw-sand) 100%);

  /* ---------------------------------------------------------------------
   * Typography
   * ------------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Fluid type scale: phone (390px) → desktop (1440px) */
  --text-h1: clamp(2.5rem, 1.6643rem + 3.4286vw, 4.75rem); /* 40 → 76 */
  --text-h2: clamp(1.6875rem, 1.3393rem + 1.4286vw, 2.625rem); /* 27 → 42 */
  --text-h3: clamp(1.5rem, 1.2214rem + 1.1429vw, 2.25rem); /* 24 → 36 */
  --text-lead-lg: clamp(1.0625rem, 0.9464rem + 0.4762vw, 1.375rem); /* 17 → 22 */
  --text-lead: clamp(1rem, 0.9071rem + 0.381vw, 1.25rem); /* 16 → 20 */
  --text-statement: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem); /* 15 → 18 */
  --text-body: clamp(0.9375rem, 0.9027rem + 0.1429vw, 1.0313rem); /* 15 → 16.5 */
  --text-body-sm: clamp(0.875rem, 0.8402rem + 0.1429vw, 0.9688rem); /* 14 → 15.5 */
  --text-meta: clamp(0.8125rem, 0.7661rem + 0.1905vw, 0.9375rem); /* 13 → 15 */
  --text-eyebrow: clamp(0.6563rem, 0.5982rem + 0.2381vw, 0.8125rem); /* 10.5 → 13 */
  --text-wordmark: clamp(1rem, 0.8607rem + 0.5714vw, 1.375rem); /* 16 → 22 */
  --text-wordmark-sm: 1rem; /* footer, 16 */
  --text-button: 0.875rem; /* 14 */
  --text-button-sm: 0.8125rem; /* 13 */
  --text-nav: 0.875rem; /* 14 */
  --text-footer: 0.8125rem; /* 13 */
  --text-fine: clamp(0.7188rem, 0.6955rem + 0.0952vw, 0.7813rem); /* 11.5 → 12.5 */

  --leading-tight: 1.05;
  --leading-heading: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --leading-loose: 2;

  --tracking-wordmark: 0.04em;
  --tracking-eyebrow: 0.18em;
  --tracking-button: 0.03em;
  --tracking-display: 0.01em;

  /* ---------------------------------------------------------------------
   * Space, layout, shape, motion
   * ------------------------------------------------------------------- */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-7: 2rem; /* 32 */
  --space-8: 2.5rem; /* 40 */
  --space-9: 3rem; /* 48 */
  --space-10: 3.5rem; /* 56 */

  --gutter: clamp(1.375rem, 0.4rem + 4vw, 4rem); /* 22 → 64 */
  --section-y: clamp(3.5rem, 2.2464rem + 5.1429vw, 6.875rem); /* 56 → 110 */
  --hero-top: clamp(3.5rem, 1.7821rem + 7.0476vw, 8.125rem); /* 56 → 130 */
  --hero-bottom: clamp(3rem, 1.7929rem + 4.9524vw, 6.25rem); /* 48 → 100 */
  --stack-heading: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); /* gap under section headings */

  --measure: 38.75rem; /* 620px: body copy column */
  --measure-narrow: 28.75rem; /* 460px: form intro */
  --measure-heading: 57.5rem; /* 920px */
  --container: 77.5rem; /* 1240px */
  --container-media: 56.25rem; /* 900px */

  --radius-pill: 999px;
  --radius-card: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem); /* 12 → 14 */

  --nav-height: 4.5rem;
  --duration-fast: 0.15s;
  --ease: ease;

  /* Breakpoint (reference only: custom properties can't be used in media
   * queries). Phone layout applies at max-width: 720px. */
  --bp-phone: 720px;
}