/* ═══════════════════════════════════════════════
   OPALINE — DESIGN TOKENS
   Every custom property. Every hex. Zero ambiguity.
   ═══════════════════════════════════════════════ */

:root {
  /* === COLOR TOKENS === */
  --teal-deep:        #0B6E7A;
  --teal-bright:      #1A9DAA;
  --amber-warm:       #D4843A;
  --ivory-stone:      #E8DECA;
  --ivory-light:      #F8F4EE;
  --navy-twilight:    #0D1B2A;
  --gold-edge:        #C9A84C;
  --charcoal:         #1C1C1E;

  /* Glassmorphism tints */
  --glass-amber-bg:   rgba(212, 132, 58, 0.14);
  --glass-amber-bdr:  rgba(212, 132, 58, 0.35);
  --glass-teal-bg:    rgba(11, 110, 122, 0.18);
  --glass-teal-bdr:   rgba(26, 157, 170, 0.4);
  --glass-navy-bg:    rgba(13, 27, 42, 0.55);
  --glass-gold-glow:  rgba(201, 168, 76, 0.15);
  --glass-violet-glow:rgba(88, 60, 140, 0.25);

  /* === TYPOGRAPHY TOKENS === */
  --font-display:     'Playfair Display', Georgia, serif;
  --font-body:        'Jost', system-ui, sans-serif;

  /* === SPACING TOKENS === */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   120px;
  --section-v:  clamp(80px, 10vw, 160px);
  --section-h:  clamp(24px, 6vw, 120px);

  /* === EASING TOKENS === */
  --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);

  /* === RADIUS TOKENS === */
  --radius-card:  20px;
  --radius-form:  24px;
  --radius-pill:  100px;
  --radius-field: 10px;

  /* === ANIMATION DURATION TOKENS === */
  --dur-popup-in:     0.8s;
  --dur-popup-out:    0.6s;
  --dur-field-focus:  0.3s;
  --dur-button-hover: 0.35s;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .popup { transition: opacity 0.3s ease !important; }
  .popup--dissolving { filter: none !important; }
  .ticker__inner { animation: none !important; }
}