/* ==========================================================================
   Advocate v2 — Design tokens
   Theme: Bone + Deep Emerald + Brass  ·  Light editorial, heavily animated
   ========================================================================== */

:root {
  /* --- Surfaces -------------------------------------------------------- */
  --bone:        #F7F4ED;
  --bone-raised: #FFFDF8;
  --bone-sunk:   #EFEAE0;
  --bone-edge:   #E4DED1;

  /* --- Text ------------------------------------------------------------ */
  --ink:         #101613;
  --ink-soft:    #2B342F;
  --ink-muted:   #55605A;
  --ink-faint:   #7A857E;

  /* --- Emerald (primary accent) ---------------------------------------- */
  --emerald:       #0F4D3A;
  --emerald-deep:  #0A3527;
  --emerald-light: #177054;
  --emerald-pale:  #DCE8E2;
  --emerald-wash:  rgba(15, 77, 58, 0.07);
  --emerald-glow:  rgba(15, 77, 58, 0.22);

  /* --- Brass (secondary accent) ---------------------------------------- */
  --brass:       #B0873C;
  --brass-deep:  #8A6A24;
  --brass-light: #CBA45C;
  --brass-wash:  rgba(176, 135, 60, 0.10);

  /* --- Support --------------------------------------------------------- */
  --success:  #1D7A50;
  --danger:   #A8342B;

  /* --- Gradients ------------------------------------------------------- */
  --grad-brass:   linear-gradient(135deg, #CBA45C 0%, #B0873C 50%, #8A6A24 100%);
  --grad-emerald: linear-gradient(135deg, #177054 0%, #0F4D3A 55%, #0A3527 100%);
  --grad-wash:    linear-gradient(180deg, rgba(15,77,58,.05), transparent 70%);

  /* --- Inverted sections (emerald ground) ------------------------------- */
  --inv-bg:      var(--emerald-deep);
  --inv-text:    #EFF4F1;
  --inv-muted:   #A9BDB4;
  --inv-hair:    rgba(239, 244, 241, 0.14);

  /* --- Borders & radii -------------------------------------------------- */
  --hair:    rgba(16, 22, 19, 0.12);
  --hair-2:  rgba(16, 22, 19, 0.22);
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* --- Shadow — soft and warm, never grey ------------------------------- */
  --shadow-1: 0 1px 2px rgba(16, 22, 19, .06);
  --shadow-2: 0 14px 38px -20px rgba(16, 22, 19, .28);
  --shadow-3: 0 40px 90px -34px rgba(16, 22, 19, .34);
  --shadow-lift: 0 26px 60px -26px rgba(15, 77, 58, .38);

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --t-eyebrow: 0.7rem;
  --t-xs:      clamp(0.74rem, 0.72rem + 0.08vw, 0.8rem);
  --t-sm:      clamp(0.84rem, 0.81rem + 0.12vw, 0.92rem);
  --t-body:    clamp(0.97rem, 0.94rem + 0.16vw, 1.07rem);
  --t-lead:    clamp(1.08rem, 1rem + 0.42vw, 1.35rem);
  --t-h4:      clamp(1.05rem, 0.98rem + 0.32vw, 1.25rem);
  --t-h3:      clamp(1.3rem, 1.14rem + 0.75vw, 1.85rem);
  --t-h2:      clamp(2rem, 1.42rem + 2.4vw, 3.8rem);
  --t-h1:      clamp(2.7rem, 1.5rem + 5.1vw, 6.6rem);
  --t-numeral: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem);
  --t-mega:    clamp(3.4rem, 1.8rem + 7vw, 9rem);

  /* --- Layout ---------------------------------------------------------- */
  --wrap:        1220px;
  --wrap-narrow: 780px;
  --gutter:      clamp(1.15rem, 0.6rem + 2.3vw, 2.9rem);
  --section-y:   clamp(4.5rem, 2.6rem + 6.4vw, 9.5rem);
  --rail:        clamp(0px, -4rem + 9vw, 7.5rem);
  --nav-h:       74px;

  /* --- Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:  .18s;
  --dur:       .34s;
  --dur-slow:  .72s;

  /* --- Layers ---------------------------------------------------------- */
  --z-ambient:  0;
  --z-content:  1;
  --z-actionbar: 100;
  --z-nav:      110;
  --z-drawer:   115;
  --z-progress: 120;
  --z-cursor:   190;
  --z-gate:     200;
  --z-intro:    240;
}
