/* ==========================================================================
   Eyeology — Brand Design Tokens
   Teal-forward palette with warm walnut/gold ACCENTS (boutique warmth).
   Token NAMES preserved so existing CSS re-skins automatically.
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --charcoal:    #21302f; /* deep teal-charcoal — headings & body text */
  --teal:        #609C9C; /* PRIMARY brand color (the old blue)         */
  --teal-deep:   #2E6A6A; /* primary CTAs, contrast                     */
  --teal-deeper: #235454; /* gradients, hovers                          */
  --mint:        #c2a878; /* WARM ACCENT — tan/gold (sparing)           */
  --mint-soft:   #e9f0ee; /* soft cool tint — section & icon backgrounds */
  --navy:        #1f4444; /* deep teal — dark sections                  */
  --brown:       #8b6f4e; /* walnut accent — premium touches, sparing   */

  /* ---- Neutrals (lightly warm) ---- */
  --white:    #fdfdfc; /* near-white — cards / elevated       */
  --paper:    #f8faf9; /* page background — soft cool-warm     */
  --line:     #e1e8e6; /* hairline borders                    */
  --ink-60:   #4f5e5c; /* muted body text                     */
  --ink-40:   #7c8987; /* captions, meta                      */

  /* ---- Semantic roles ---- */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --bg-dark:       var(--navy);
  --text:          var(--charcoal);
  --text-muted:    var(--ink-60);
  --brand:         var(--teal);
  --brand-strong:  var(--teal-deep);
  --brand-darker:  var(--teal-deeper);
  --on-brand:      #ffffff; /* text on teal / dark */

  /* ---- Type (Inter throughout, matching the try-on store) ---- */
  --font-head: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --tracking-wide:  0.14em;
  --tracking-wider: 0.22em;

  /* ---- Radius & elevation ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,40,40,.05), 0 2px 8px rgba(20,40,40,.05);
  --shadow:    0 6px 22px rgba(20,40,40,.08);
  --shadow-lg: 0 20px 50px rgba(20,40,40,.14);

  /* ---- Layout ---- */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(34px, 5.4vw, 72px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .5s;
}

/* Gradients reused across CTAs and dark bands */
:root {
  --grad-teal: linear-gradient(135deg, var(--teal) 0%, var(--teal-deeper) 100%);
  --grad-dark: linear-gradient(160deg, #2c5e5e 0%, var(--navy) 70%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}