/* ============================================================
   dogoda. - Design Tokens
   Doing good, with data.
   ------------------------------------------------------------
   Single source of truth for the website. Drop-in ready.
   Palette ratio (sacred): 60% Cream · 25% Ink · 12% Red · 3% Sage.
   One red moment per surface. Teal is a punctuation mark.
   ============================================================ */

:root {
  /* ---- Brand palette -------------------------------------- */
  --red:       #ff2731;   /* Signal Red    - wordmark, primary CTA, the look-here moment */
  --coral:     #f06460;   /* Heritage Coral - v1 holdover, sparingly */
  --rose:      #f4746b;   /* Warm Rose     - warm accents */

  --ink:       #2a1f1b;   /* Walnut Ink    - primary text (NEVER pure black) */
  --ink-soft:  #4a3d37;   /* secondary text */
  --mute:      #8a8682;   /* Stone         - tertiary text, hairlines */
  --rule:      #d9d4cc;   /* thin rules */

  --cream:     #f1f0ed;   /* Cream         - primary background */
  --paper:     #faf8f4;   /* Paper         - lighter cream (cards) */
  --sand:      #e8e1d4;   /* Warm Sand     - warm neutral surface */
  --sage:      #557a7a;   /* Dusty Teal    - charts, data-callouts ONLY */

  /* tinted derivatives (kept on-palette) */
  --red-wash:  #ffe9ea;   /* faint red field for chips/hovers */
  --sage-wash: #e4ebe9;   /* faint teal field for data chips */
  --ink-12:    rgba(42, 31, 27, 0.12);
  --ink-06:    rgba(42, 31, 27, 0.06);

  /* ---- Type roles ----------------------------------------- */
  --display: "Nunito", "Quicksand", system-ui, sans-serif;   /* 800 - logo + display */
  --sans:    "Public Sans", "Inter", system-ui, sans-serif;  /* 300–800 - UI + body */
  --mono:    "Source Code Pro", ui-monospace, monospace;     /* 400–600 - numerals, eyebrows */

  /* ---- Fluid type scale (clamp: min … vw … max) - warm & calm, not noisy */
  --fs-display: clamp(2.6rem, 1.5rem + 5vw, 5.25rem);
  --fs-h1:      clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem);
  --fs-lead:    clamp(1.1rem, 1.02rem + 0.45vw, 1.35rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
  --fs-small:   0.9rem;
  --fs-eyebrow: 0.82rem;

  /* ---- Spacing scale (8px base) --------------------------- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --maxw: 1240px;
  --maxw-text: 68ch;

  /* ---- Radii ---------------------------------------------- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- Motion --------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;

  /* ---- Elevation (NO drop shadows on brand marks; UI only) */
  --lift: 0 1px 2px rgba(42,31,27,0.04), 0 12px 30px -18px rgba(42,31,27,0.28);
  --lift-sm: 0 1px 2px rgba(42,31,27,0.05);
}