/* ============================================================
   FutureBatao — Design Tokens
   Matched to astrotalk.com: clean & premium, YELLOW + charcoal,
   huge bold grotesk type, coral accent, pill buttons, soft
   yellow→white gradients, floating nav. Mobile-first.
   (Variable names kept stable; values retuned.)
   ============================================================ */

:root {
  /* ---- Brand: marigold / amber gold (primary buttons/accents) ---- */
  --c-yellow-50:  #FFF6E6;
  --c-yellow-100: #FFE7BD;
  --c-yellow-200: #FFD488;
  --c-yellow-300: #FFC457;
  --c-yellow-400: #FFB42E;  /* primary (marigold amber) */
  --c-yellow-500: #F09E12;  /* hover */
  --c-yellow-600: #D6850A;
  --c-yellow-700: #A6650A;

  /* ---- Coral / clay (heading emphasis gradient, like "Astrologers") ---- */
  --c-coral-400: #ED6A5E;
  --c-coral-500: #E15247;
  --c-clay-400:  #C98E72;

  /* ---- Saffron kept as a warm secondary accent (links, small bits) ---- */
  --c-saffron-50:  #FFF3E9;
  --c-saffron-100: #FFE2C7;
  --c-saffron-200: #FFC591;
  --c-saffron-300: #FFA85C;
  --c-saffron-400: #FF8A2B;
  --c-saffron-500: #F0750E;
  --c-saffron-600: #D9650A;
  --c-saffron-700: #B44D00;

  /* ---- Purple (zodiac chips, like the horoscope wheel) ---- */
  --c-purple-400: #9B6BE3;
  --c-purple-500: #7C46C9;
  --c-purple-600: #6334A8;

  /* ---- Green: online indicator only ---- */
  --c-green-400: #34C759;
  --c-green-500: #1FA851;
  --c-green-600: #15863F;

  /* ---- Gold: star ratings ---- */
  --c-gold-400: #FFC93C;
  --c-gold-500: #F5A623;
  --c-gold-600: #C9831A;

  /* ---- Ink / charcoal (named *plum* for back-compat; now charcoal) ---- */
  --c-plum-900: #2B2C33;   /* headings — deep charcoal */
  --c-plum-800: #3A3B42;   /* nav text */
  --c-plum-700: #4C4D55;
  --c-plum-500: #6E6F78;
  --c-plum-300: #A7A8B0;

  /* ---- Neutrals / surfaces ---- */
  --c-ink:      #33343B;   /* default text (charcoal) */
  --c-ink-soft: #5A5B64;   /* secondary text */
  --c-muted:    #8C8D97;   /* tertiary text */
  --c-line:     #EDEADF;   /* warm hairline borders */
  --c-cream:    #FFFFFF;   /* page background (white) */
  --c-cream-2:  #FFF7E8;   /* pale marigold band */
  --c-surface:  #FFFFFF;   /* cards */
  --c-success:  #1FA851;
  --c-danger:   #E15247;

  /* ---- Semantic aliases ---- */
  --c-bg:       var(--c-cream);
  --c-text:     var(--c-ink);
  --c-primary:  var(--c-yellow-400);
  --c-primary-d:var(--c-yellow-500);
  --c-on-yellow:#2B2C33;   /* text on yellow buttons */

  /* ---- Gradients ---- */
  --g-yellow:   linear-gradient(180deg, #FFFFFF 0%, #FFEBC2 100%);     /* hero/section wash */
  --g-yellow-strong: linear-gradient(180deg, #FFF6E6 0%, #FFCD6B 100%);
  --g-coral:    linear-gradient(95deg, #E15247 0%, #C98E72 100%);      /* emphasis text */
  --g-saffron:  linear-gradient(135deg, #FFC85A 0%, #FFB42E 60%, #F09E12 100%);
  --g-gold:     linear-gradient(135deg, #FFD98A 0%, #F0941A 100%);
  --g-dusk:     linear-gradient(160deg, #2D2350 0%, #5A2E6B 55%, #7C46C9 130%);
  --g-cream:    linear-gradient(180deg, #FFFFFF 0%, #FFEBC2 100%);
  --g-hero:     linear-gradient(180deg, #FFFFFF 0%, #FFE3A8 100%);
  --g-halo:     radial-gradient(55% 60% at 80% 15%, rgba(255,180,46,.4) 0%, rgba(255,180,46,0) 70%);

  /* ---- Typography (bold grotesk — Hanken Grotesk) ---- */
  --font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.15rem;
  --fs-lg:   1.4rem;
  --fs-xl:   1.85rem;
  --fs-2xl:  2.6rem;
  --fs-3xl:  clamp(2.4rem, 6vw, 4rem);
  --fs-hero: clamp(3rem, 8vw, 6rem);

  --lh-tight: 1.02;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-x:      800;
  --fw-black:  900;

  /* ---- Spacing scale ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ---- Radii (pills + soft large cards) ---- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  34px;
  --r-btn: 999px;   /* buttons are pills */
  --r-pill: 999px;

  /* ---- Shadows (soft, warm) ---- */
  --sh-xs: 0 1px 3px rgba(60,50,20,.05);
  --sh-sm: 0 3px 10px rgba(60,50,20,.07);
  --sh-md: 0 10px 30px rgba(60,50,20,.10);
  --sh-lg: 0 24px 60px rgba(60,50,20,.14);
  --sh-glow: 0 8px 22px rgba(255,180,46,.5);   /* marigold CTA lift */

  /* ---- Layout ---- */
  --maxw: 1240px;
  --nav-h: 76px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur: .28s;
  --dur-slow: .55s;

  --z-nav: 1000;
  --z-overlay: 1100;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}