/* ============================================================
   tokens.css — global design tokens (CSS custom properties)
   The single source of truth for color, type, spacing, radius,
   shadow, and layout widths. Adjusting a value here updates the
   whole site. See README (Design Tokens) before changing.
   ============================================================ */

:root {
  /* --- Surfaces & backgrounds --- */
  --color-bg-primary: #fbf7f2;      /* warm white — dominant page background */
  --color-bg-secondary: #f3ede5;    /* soft stone — alternating sections */
  --color-bg-ink: #262320;          /* charcoal — dark editorial sections */
  --color-surface: #ffffff;         /* cards, form, elevated surfaces */

  /* --- Text --- */
  --color-text-primary: #262320;    /* charcoal — body & headings */
  --color-text-secondary: #675f57;  /* warm gray — supporting text (AA on light) */
  --color-text-onink: #f7f1e9;      /* text on charcoal sections */
  --color-text-onink-soft: #c9beb1; /* muted text on charcoal sections */

  /* --- Accents ---
     --teal / --rose are decorative brand tints.
     --*-strong variants are used for interactive elements so text
     and states meet WCAG AA contrast. Do not swap them. */
  --color-accent: #527c78;          /* muted teal — decorative accent */
  --color-accent-strong: #345f5a;   /* interactive teal (AA text on white bg) */
  --color-accent-stronger: #274a46; /* hover / active teal */
  --color-accent-soft: #e5eeec;     /* teal wash for chips / eyebrows */

  --color-rose: #a97870;            /* muted rose-gold — decorative accent */
  --color-rose-strong: #8b5f58;     /* interactive rose */
  --color-rose-stronger: #6f4b45;   /* hover rose */
  --color-rose-soft: #f3e7e2;       /* rose wash */

  /* --- Lines & focus --- */
  --color-border: #e4ddd3;
  --color-border-strong: #d3cabd;
  --color-focus: #2b5a70;

  /* --- Shadows (soft, restrained) --- */
  --shadow-soft: 0 8px 24px rgba(38, 35, 32, 0.07);
  --shadow-card: 0 1px 2px rgba(38, 35, 32, 0.04), 0 14px 34px rgba(38, 35, 32, 0.08);
  --shadow-lift: 0 2px 4px rgba(38, 35, 32, 0.05), 0 22px 48px rgba(38, 35, 32, 0.14);

  /* --- Corner radii (used sparingly) --- */
  --radius-sm: 0.35rem;
  --radius-md: 0.7rem;
  --radius-lg: 1.15rem;
  --radius-pill: 999px;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Type families --- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Fluid type scale --- */
  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem); /* @kind spacing */
  --text-sm: clamp(0.84rem, 0.81rem + 0.12vw, 0.92rem); /* @kind spacing */
  --text-body: clamp(1rem, 0.96rem + 0.18vw, 1.1rem); /* @kind spacing */
  --text-lead: clamp(1.12rem, 1.02rem + 0.4vw, 1.32rem); /* @kind spacing */
  --heading-4: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); /* @kind spacing */
  --heading-3: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); /* @kind spacing */
  --heading-2: clamp(2.1rem, 1.6rem + 2vw, 3.3rem); /* @kind spacing */
  --heading-1: clamp(2.45rem, 1.8rem + 3vw, 4.75rem); /* @kind spacing */

  /* --- Layout widths --- */
  --content-readable: 44rem;
  --content-mid: 62rem;
  --content-wide: 80rem;
  --gutter: 1.5rem;

  /* --- Timing --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur: 220ms; /* @kind other */

  /* --- Header height (for sticky offset) --- */
  --header-h: 4.75rem;
}