/* ============================================================
   TOKENS.CSS — Cincinnati Fit Body Design System
   Elegant Feminine Wellness Luxury
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────── */
  --color-bg:              #fdfaf7;
  --color-surface:         #fff8f5;
  --color-surface-offset:  #faeee8;
  --color-surface-2:       #f8f0eb;

  --color-text:            #2c1f1a;
  --color-text-muted:      #7a5c54;
  --color-text-light:      #a88880;

  --color-primary:         #b8975a;   /* gold */
  --color-primary-dark:    #9a7a40;
  --color-primary-light:   #f5edd9;
  --color-primary-xlight:  #fdf7ec;

  --color-secondary:       #d4867a;   /* blush */
  --color-secondary-dark:  #b86b5f;
  --color-secondary-light: #fce8e5;
  --color-secondary-xlight:#fff3f1;

  --color-border:          #e8cec5;
  --color-divider:         #f0ddd5;

  /* ── Gradients ──────────────────────────────────────── */
  --gradient-gold:         linear-gradient(135deg, #c9a96e 0%, #b8975a 50%, #9a7a40 100%);
  --gradient-gold-soft:    linear-gradient(135deg, #f5edd9 0%, #fdf7ec 100%);
  --gradient-blush:        linear-gradient(135deg, #fce8e5 0%, #fff3f1 100%);
  --gradient-hero:         linear-gradient(160deg, rgba(253,250,247,0.97) 0%, rgba(250,238,232,0.93) 45%, rgba(244,228,218,0.88) 100%);
  --gradient-text:         linear-gradient(135deg, #c9a96e 0%, #b8975a 100%);
  --gradient-cta:          linear-gradient(135deg, #d4867a 0%, #c06e60 50%, #b8975a 100%);
  --gradient-section:      linear-gradient(180deg, #fff8f5 0%, #fdfaf7 100%);

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(180, 120, 100, 0.06);
  --shadow-sm:   0 2px 8px rgba(180, 120, 100, 0.08), 0 1px 3px rgba(180, 120, 100, 0.04);
  --shadow-md:   0 4px 20px rgba(180, 120, 100, 0.10), 0 2px 8px rgba(180, 120, 100, 0.06);
  --shadow-lg:   0 8px 40px rgba(180, 120, 100, 0.12), 0 4px 16px rgba(180, 120, 100, 0.08);
  --shadow-xl:   0 16px 64px rgba(180, 120, 100, 0.14), 0 8px 24px rgba(180, 120, 100, 0.08);
  --shadow-gold: 0 4px 20px rgba(184, 151, 90, 0.25);
  --shadow-inset: inset 0 2px 8px rgba(180, 120, 100, 0.06);

  /* ── Radius ─────────────────────────────────────────── */
  --radius-xs:   0.25rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-2xl:  3rem;
  --radius-full: 9999px;

  /* ── Typography ─────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Jost', 'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-hero: 5rem;       /* 80px */

  /* ── Spacing ────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Transitions ────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --transition-fast: 0.15s var(--ease-out);
  --transition-base: 0.25s var(--ease-out);
  --transition-slow: 0.4s var(--ease-out);

  /* ── Layout ─────────────────────────────────────────── */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --nav-height:    70px;

  /* ── Section Spacing ────────────────────────────────── */
  --section-py: clamp(4rem, 8vw, 7rem);
}