/* ========================================
   ACHKID HORSE RIDING - Design Tokens
   Ocean-Coast Palette · Relaxing & Premium
   ======================================== */

:root {
  /* ── Backgrounds ── */
  --bg-sand:       #F7F2EB;
  --bg-cream:      #FFFAF4;
  --bg-warm:       #EDE6DC;

  /* ── Primary – deep ocean teal ── */
  --ocean:         #0C4A5E;
  --ocean-light:   #15677F;
  --ocean-pale:    #D6ECF2;

  /* ── Accent – sunset clay ── */
  --clay:          #C86F3D;
  --clay-dark:     #A85A2D;
  --clay-glow:     rgba(200, 111, 61, 0.18);

  /* ── Warm gold ── */
  --sun:           #E6A64E;
  --mint:          #DCF0E9;

  /* ── Text ── */
  --ink:           #1A2024;
  --ink-soft:      #3D4F56;
  --muted:         #6B7C83;
  --ghost:         rgba(26, 32, 36, 0.06);

  /* ── UI ── */
  --white:         #FFFFFF;
  --line:          rgba(12, 74, 94, 0.10);
  --overlay:       rgba(10, 42, 54, 0.72);

  /* ── Fonts ── */
  --serif:         'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:          'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  /* ── Spacing ── */
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      1.5rem;
  --space-lg:      2.5rem;
  --space-xl:      5rem;
  --space-2xl:     8rem;

  /* ── Radius ── */
  --radius-sm:     8px;
  --radius:        14px;
  --radius-lg:     22px;
  --radius-xl:     32px;
  --radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-sm:     0 2px 12px rgba(12, 74, 94, 0.06);
  --shadow-md:     0 8px 30px rgba(12, 74, 94, 0.09);
  --shadow-lg:     0 20px 50px rgba(12, 74, 94, 0.13);
  --shadow-glow:   0 8px 32px rgba(200, 111, 61, 0.25);

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --duration:      0.4s;
}