/* Design tokens — Kaitlyn & Steven, 23 May 2027.
   Ported from .claude/design/Style Guide.dc.html.
   Change values here; never hardcode a hex in a template. */

:root {
  /* Evergreen — anchor color, from the save-the-date */
  --color-forest-900: #14251C;
  --color-forest-800: #1C3427;
  --color-forest-700: #2A4A36;
  --color-forest-600: #3B6349;
  --color-moss-400:   #7C9A7E;
  --color-sage-200:   #C4D2BF;

  /* Warm neutrals — surface and text */
  --color-cream-50:  #FDFBF7;
  --color-cream-100: #F7F2E9;
  --color-cream-200: #EDE5D8;
  --color-ink-500:   #6B6555;
  --color-ink-700:   #3D392F;
  --color-ink-900:   #1C1A16;

  /* Accents and state */
  --color-gold-500:  #B78B48;  /* accent, links on dark, small-caps eyebrow */
  --color-gold-300:  #DCC28C;  /* hairline rules, focus ring */
  --color-dusk-300:  #E4C4B4;  /* optional blush wash — currently unused */
  --color-error-600: #8C3A2E;  /* form error borders + labels */
  --color-error-50:  #F6E7E3;  /* error field fill */

  /* Semantic surfaces (aliases so templates don't reach for the raw ramp) */
  --surface-page:    var(--color-cream-50);
  --surface-raised:  var(--color-cream-100);
  --surface-border:  var(--color-cream-200);
  --surface-dark:    var(--color-forest-800);

  --text-body:       var(--color-ink-700);
  --text-heading:    var(--color-forest-900);
  --text-muted:      var(--color-ink-500);
  --text-on-dark:    var(--color-cream-50);

  --accent:          var(--color-gold-500);
  --accent-soft:     var(--color-gold-300);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    Karla, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale — clamp() so 320px → 2560px works with zero media queries.
     Body copy is 19px, not 16px; 16px is UI and form values only. */
  --text-display:  clamp(2.75rem, 9vw, 5.5rem);   /* 44 → 88px */
  --text-3xl:      clamp(1.875rem, 4vw, 2.75rem); /* 30 → 44px */
  --text-2xl:      1.75rem;                       /* 28px */
  --text-xl:       1.375rem;                      /* 22px */
  --text-lg:       1.1875rem;                     /* 19px — body */
  --text-base:     1rem;                          /* 16px — UI + inputs */
  --text-sm:       0.875rem;                      /* 14px */
  --text-eyebrow:  0.75rem;                       /* 12px, uppercase + tracked */
  --tracking-eyebrow: 0.14em;

  --leading-tight:   1.05;
  --leading-heading: 1.25;
  --leading-body:    1.65;

  /* Space — 4px base */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px — block gap */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px — section (mobile) */
  --space-10: 8rem;      /* 128px — section (desktop) */

  /* Section rhythm — mobile → desktop with clamp, no media queries */
  --section-pad-y: clamp(var(--space-9), 12vw, var(--space-10));

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;   /* the default */
  --radius-lg: 8px;
  --radius-pill: 999px;
  --radius-arch: 50% 50% var(--radius-md) var(--radius-md); /* portrait engagement photos */

  /* Elevation — green-tinted, never grey */
  --shadow-sm: 0 1px 2px rgba(20, 37, 28, 0.07);
  --shadow-md: 0 4px 16px rgba(20, 37, 28, 0.09);
  --shadow-lg: 0 16px 48px rgba(20, 37, 28, 0.14);

  /* Focus ring — 3px gold glow, survives on cream and green surfaces */
  --focus-ring: 0 0 0 3px rgba(220, 194, 140, 0.55);

  /* Layout */
  --container-max: 1100px;
  --measure-body: 66ch;
  --measure-narrow: 46ch;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 160ms;
  --duration-med:  240ms;
}