/* ==========================================================================
   Opal & Ivy — Design tokens
   Every color, type scale, spacing value and easing lives here.
   ========================================================================== */

:root {
  /* ---- Brand palette (exact) ------------------------------------------ */
  --cream:      #FAF7F0;
  --stone:      #ECE7DE;
  --espresso:   #2E231C;
  --sage:       #5F6F52;
  --chestnut:   #7A4B3A;
  --sandstone:  #DDD6CA;
  --sage-deep:  #3D4B34;
  --gold:       #A68A55;
  --gold-soft:  #C4AA75;

  /* ---- Semantic roles -------------------------------------------------- */
  --bg:           var(--cream);
  --surface:      var(--stone);
  --ink:          var(--espresso);
  --ink-soft:     color-mix(in srgb, var(--espresso) 72%, var(--cream));
  --ink-muted:    color-mix(in srgb, var(--espresso) 55%, var(--cream));
  --accent:       var(--sage);
  --accent-deep:  var(--sage-deep);
  --accent-2:     var(--chestnut);
  --line:         var(--sandstone);
  --on-dark:      var(--cream);
  --on-dark-soft: color-mix(in srgb, var(--cream) 74%, transparent);
  --on-dark-line: color-mix(in srgb, var(--cream) 18%, transparent);

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

  --fs-micro:   0.6875rem;
  --fs-small:   0.875rem;
  --fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-lede:    clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  --fs-h3:      clamp(1.625rem, 1.15rem + 1.9vw, 2.75rem);
  --fs-h2:      clamp(2.625rem, 1.5rem + 4.6vw, 5.75rem);

  --track:      0.22em;

  /* ---- Layout ---------------------------------------------------------- */
  --gutter:    clamp(1rem, 0.4rem + 2.8vw, 3.5rem);
  --section:   clamp(5rem, 3rem + 7vw, 10.5rem);
  --max:       94rem;
  --header-h:  5.25rem;
  --pill:      999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);

  --dur-fast: 0.45s;
  --dur-base: 0.9s;
  --dur-slow: 1.4s;
}

/* Spring-physics curves (damped springs sampled into linear()). Overrides the
   cubic-bezier fallbacks wherever the browser understands linear(). */
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(
      0, 0.004 1.1%, 0.019 2.4%, 0.066 4.9%, 0.146 7.6%, 0.255 10.6%,
      0.395 14%, 0.561 18.1%, 0.726 22.5%, 0.859 26.7%, 0.948 30.5%,
      1.004 34.5%, 1.029 38.3%, 1.035 42.2%, 1.027 46.9%, 1.015 51.5%,
      1.005 56.9%, 0.998 62.9%, 0.997 70.4%, 0.999 80.9%, 1
    );
    --ease-soft: linear(
      0, 0.018 2.3%, 0.07 4.9%, 0.16 7.9%, 0.29 11.5%, 0.45 15.6%,
      0.61 20%, 0.76 25%, 0.87 30%, 0.95 35.5%, 0.99 41%, 1.012 47%,
      1.015 53%, 1.008 61%, 1.002 70%, 1
    );
  }
}