/* ================================================================
   Girl Harmony — Design Tokens
   Brand palette pulled from Girl Chocolate brand research.
   "Yeah Girl, All Natural Chocolate for Your Cycle."
   Voice: warm, body-literate, never clinical, never shaming.
   ================================================================ */

:root {
  /* ---------- COLOR — base brand palette ---------- */
  --gh-plum-900:   #2C1F44;   /* deepest plum / dark mode bg */
  --gh-plum-700:   #4A357A;   /* hover state for primary */
  --gh-plum-500:   #6B4C9A;   /* PRIMARY — Cocoa Plum */
  --gh-plum-300:   #9D85C5;   /* tertiary plum */
  --gh-plum-100:   #EDE6F5;   /* Soft Lilac, card bg */
  --gh-plum-50:    #F6F1FB;   /* faintest lilac wash */

  --gh-cocoa-900:  #1C0F08;   /* deepest text */
  --gh-cocoa-700:  #3B2417;   /* Midnight Cocoa — primary text */
  --gh-cocoa-500:  #6B4C36;   /* mid text */
  --gh-cocoa-300:  #9C7E68;   /* muted text */

  --gh-cream-50:   #FBF7F2;   /* page bg, warm */
  --gh-cream-100:  #F8F4EE;   /* Coconut Cream — surface */
  --gh-cream-200:  #ECE0D1;   /* dividers, hairlines */
  --gh-cream-300:  #DDC9B1;   /* muted borders */

  --gh-pink-700:   #C77E8E;
  --gh-pink-500:   #E8A4B8;   /* Bloom Pink — action */
  --gh-pink-300:   #F4C9D4;
  --gh-pink-100:   #FBEAEF;
  --gh-pink-50:    #FDF6F8;

  /* ---------- COLOR — phase accents (Girl Chocolate phase identity) ---------- */
  --gh-menstrual:       #A6477A;   /* Berry Flow */
  --gh-menstrual-soft:  #F1DEE8;
  --gh-follicular:      #9DB89A;   /* Sage Calm */
  --gh-follicular-soft: #E2EBDF;
  --gh-ovulation:       #F2C57C;   /* Honey Glow */
  --gh-ovulation-soft:  #FBEFD5;
  --gh-luteal:          #6B4C9A;   /* Cocoa Plum */
  --gh-luteal-soft:     #EDE6F5;

  /* ---------- COLOR — semantic ---------- */
  --gh-success: #6FAE74;
  --gh-warning: #E2A458;
  --gh-error:   #C24A5C;
  --gh-info:    #6E97C7;
  --gh-gold-500: #F2C57C;
  --gh-gold-100: #FBEFD5;

  /* ---------- THEME — light mode (default) ---------- */
  --bg:             var(--gh-cream-50);
  --bg-elevated:    #FFFFFF;
  --bg-card:        var(--gh-cream-100);
  --bg-tint:        var(--gh-plum-100);
  --bg-tint-pink:   var(--gh-pink-100);
  --border:         #ECE3D5;
  --border-strong:  var(--gh-cream-300);
  --text:           var(--gh-cocoa-700);
  --text-muted:     var(--gh-cocoa-500);
  --text-subtle:    var(--gh-cocoa-300);
  --text-inverse:   var(--gh-cream-50);
  --accent:         var(--gh-plum-500);
  --accent-text:    #FFFFFF;
  --action:         var(--gh-pink-500);
  --action-text:    var(--gh-cocoa-900);

  --shadow-sm:      0 1px 2px rgba(60, 36, 23, 0.05);
  --shadow-md:      0 4px 16px rgba(60, 36, 23, 0.08);
  --shadow-lg:      0 12px 40px rgba(60, 36, 23, 0.12);
  --shadow-xl:      0 24px 64px rgba(60, 36, 23, 0.16);
  --shadow-plum:    0 8px 28px rgba(107, 76, 154, 0.32);
  --shadow-pink:    0 8px 28px rgba(232, 164, 184, 0.40);

  /* ---------- Legacy aliases (rose -> pink, sage -> follicular) ---------- */
  --gh-rose-500: var(--gh-pink-500);
  --gh-rose-300: var(--gh-pink-300);
  --gh-rose-100: var(--gh-pink-100);
  --gh-sage-500: var(--gh-follicular);
  --gh-sage-100: var(--gh-follicular-soft);
}

/* ================================================================
   Theme accent (overrides --gh-plum-* tokens per data-accent attr).
   Phase color "luteal" is a separate hardcoded var, so it never
   changes regardless of theme. The brand accent IS plum, so we
   re-skin plum and the entire UI follows.
   ================================================================ */

/* Cocoa Plum — purple (default) */
:root,
:root[data-accent="purple"] {
  --gh-plum-900: #2C1F44;
  --gh-plum-700: #4A357A;
  --gh-plum-500: #6B4C9A;
  --gh-plum-300: #9D85C5;
  --gh-plum-100: #EDE6F5;
  --gh-plum-50:  #F6F1FB;
  --shadow-plum: 0 8px 28px rgba(107, 76, 154, 0.32);
  --accent-on-dark: #E8A4B8; /* readable label color on dark accent surfaces */
}

/* Bloom Rose — pink */
:root[data-accent="pink"] {
  --gh-plum-900: #4A2030;
  --gh-plum-700: #9E5775;
  --gh-plum-500: #C77294;
  --gh-plum-300: #E1A6BB;
  --gh-plum-100: #FBEAEF;
  --gh-plum-50:  #FDF6F8;
  --shadow-plum: 0 8px 28px rgba(199, 114, 148, 0.36);
  --accent-on-dark: #FBEAEF;
}

/* Honey Glow — gold */
:root[data-accent="honey"] {
  --gh-plum-900: #3F2A0A;
  --gh-plum-700: #8C661F;
  --gh-plum-500: #B98835;
  --gh-plum-300: #DDC182;
  --gh-plum-100: #F8EAD0;
  --gh-plum-50:  #FDF6E6;
  --shadow-plum: 0 8px 28px rgba(217, 162, 78, 0.40);
  --accent-on-dark: #F8EAD0;
}

:root {
  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Choclement", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  --size-display-2xl: 56px;
  --size-display-xl:  44px;
  --size-display-lg:  34px;
  --size-display-md:  28px;
  --size-display-sm:  22px;
  --size-h1: 28px;
  --size-h2: 22px;
  --size-h3: 18px;
  --size-h4: 16px;
  --size-body: 15px;
  --size-body-sm: 13px;
  --size-caption: 11px;

  --lh-tight: 1.05;
  --lh-snug:  1.22;
  --lh-base:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* ---------- SPACING — 4pt grid ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---------- RADIUS ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---------- MOTION (breath-paced, no bounce) ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 180ms;
  --d-base: 280ms;
  --d-slow: 420ms;
  --d-deliberate: 720ms;

  /* ---------- LAYOUT — phone-first ---------- */
  --device-w: 390px;
  --device-h: 844px;
  --safe-top: 54px;
  --safe-bottom: 34px;
  --tabbar-h: 78px;
}

/* ---------- DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --bg:             #16101F;
    --bg-elevated:    #1F1830;
    --bg-card:        #281F3D;
    --bg-tint:        #322550;
    --bg-tint-pink:   #3D1F2C;
    --border:         #2E2542;
    --border-strong:  #3F3358;
    --text:           var(--gh-cream-100);
    --text-muted:     #C9BBE0;
    --text-subtle:    #8C7AA8;
    --text-inverse:   var(--gh-plum-900);
    --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.5);
  }
}

:root.theme-dark {
  --bg:             #16101F;
  --bg-elevated:    #1F1830;
  --bg-card:        #281F3D;
  --bg-tint:        #322550;
  --bg-tint-pink:   #3D1F2C;
  --border:         #2E2542;
  --border-strong:  #3F3358;
  --text:           #F1E9DC;
  --text-muted:     #C9BBE0;
  --text-subtle:    #8C7AA8;
  --text-inverse:   var(--gh-plum-900);
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.5);

  /* Dark-mode chocolate-brand re-skin so contrast stays accessible */
  --gh-cream-50:   #1F1830;
  --gh-cream-100:  #2A2240;
  --gh-cream-200:  #3F3358;
  --gh-cream-300:  #5A4D78;
  --gh-cocoa-700:  #F1E9DC;       /* "primary text" inverts to cream */
  --gh-cocoa-500:  #C9BBE0;
  --gh-cocoa-300:  #9D8FBF;
}

/* Per-component dark-mode tweaks for contrast */
:root.theme-dark .top-bar-back,
:root.theme-dark .top-bar-action {
  background: var(--bg-card);
  color: var(--text);
}
:root.theme-dark .top-bar-back:hover,
:root.theme-dark .top-bar-action:hover {
  background: var(--bg-tint);
}
:root.theme-dark .btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border-strong);
}
:root.theme-dark .btn-secondary:hover { background: var(--bg-tint); }
:root.theme-dark .btn-ghost { color: var(--text); }
:root.theme-dark .btn-ghost:hover { background: var(--bg-card); }
:root.theme-dark .chip {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border-strong);
}
:root.theme-dark .chip:hover { background: var(--bg-tint); }
:root.theme-dark .input,
:root.theme-dark .textarea,
:root.theme-dark .select {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border-strong);
}
:root.theme-dark .row + .row { border-top-color: var(--border); }
:root.theme-dark .row:hover { background: var(--bg-tint); }
:root.theme-dark .row-icon { background: var(--bg-tint); }
:root.theme-dark .device { background: var(--bg); }
:root.theme-dark .device::before { background: #0E0712; }

/* Dark mode: floating top-bar buttons that previously sat on white */
:root.theme-dark .top-bar-back[style*="rgba(255"],
:root.theme-dark .top-bar-action[style*="rgba(255"] {
  background: rgba(36, 23, 16, 0.85) !important;
  backdrop-filter: blur(10px);
  color: var(--text);
}

/* Dark-mode floating top bars and overlays — ensure text is readable */
:root.theme-dark .splash,
:root.theme-dark .welcome,
:root.theme-dark .bestie-screen {
  background: linear-gradient(180deg, var(--bg) 0%, #1F1830 100%);
}
:root.theme-dark .splash-logo,
:root.theme-dark .welcome-title {
  color: var(--gh-plum-300);
}

:root.theme-dark .you-hero {
  background:
    radial-gradient(80% 50% at 50% 0%, var(--gh-plum-900), transparent 70%),
    linear-gradient(180deg, var(--bg-elevated) 0%, transparent 100%);
}

:root.theme-dark .tab-bar {
  background: linear-gradient(180deg, rgba(22, 16, 31, 0) 0%, rgba(22, 16, 31, 0.94) 36%);
  border-top-color: var(--border);
}
:root.theme-dark .tab-indicator { background: var(--gh-plum-900); }
:root.theme-dark .tab.is-fab .tab-icon {
  box-shadow:
    0 0 0 4px var(--bg),
    0 12px 32px rgba(107, 76, 154, 0.55),
    0 6px 16px rgba(107, 76, 154, 0.32);
}

:root.theme-dark .feat-card,
:root.theme-dark .card,
:root.theme-dark .stat-tile,
:root.theme-dark .product-card,
:root.theme-dark .health-strip,
:root.theme-dark .you-list,
:root.theme-dark .quiz-block,
:root.theme-dark .timer-tile,
:root.theme-dark .wear-tile {
  background: var(--bg-elevated);
  border-color: var(--border);
}
:root.theme-dark .card-tinted { background: var(--bg-tint) !important; }
:root.theme-dark .pinned-section {
  background: var(--gh-plum-900);
  border-color: var(--gh-plum-700);
}
:root.theme-dark .qa,
:root.theme-dark .flow-opt,
:root.theme-dark .mood-opt {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
}
:root.theme-dark .log-tab { background: var(--bg-card); color: var(--text-muted); }
:root.theme-dark .log-tab.is-active { background: var(--gh-plum-500); color: #fff; }
:root.theme-dark .sheet { background: var(--bg-elevated); }
:root.theme-dark .switch { background: var(--bg-tint); }
:root.theme-dark .switch.is-on { background: var(--gh-plum-500); }
:root.theme-dark .bday-card {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(232, 164, 184, 0.25), transparent 60%),
    linear-gradient(160deg, var(--bg-elevated) 0%, var(--gh-plum-900) 100%);
  color: var(--text);
}
:root.theme-dark .bday-title { color: var(--text); }
:root.theme-dark .bday-line  { color: var(--text); }
:root.theme-dark .feat-benefit { color: var(--gh-plum-300); border-left-color: var(--gh-plum-500); }
:root.theme-dark .article-cover { background: linear-gradient(135deg, var(--gh-plum-700), var(--gh-plum-900)); }
:root.theme-dark .breath-orb { color: #fff; }
:root.theme-dark .article-body p,
:root.theme-dark .article-body h2 { color: var(--text); }
:root.theme-dark .feat-notes { background: var(--bg-tint); color: var(--text-muted); }
:root.theme-dark .feat-demand { background: var(--bg-tint-pink); color: var(--text); }
:root.theme-dark .empty { color: var(--text-muted); }
:root.theme-dark .bestie-quick-chip {
  background: rgba(255,255,255,0.06);
  color: var(--gh-plum-300);
  border-color: rgba(157, 133, 197, 0.3);
}
/* Bestie chat dark-mode contrast */
:root.theme-dark .bestie-header {
  background: rgba(31, 24, 48, 0.7);
  border-bottom-color: var(--border);
}
:root.theme-dark .bestie-name { color: var(--text); }
:root.theme-dark .bubble-them {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
:root.theme-dark .bubble-me {
  background: var(--gh-plum-500);
  color: #fff;
}
:root.theme-dark .chat-input {
  background: rgba(31, 24, 48, 0.85);
  border-top-color: var(--border);
}
:root.theme-dark .chat-input input {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border-strong);
}
:root.theme-dark .chat-input input::placeholder { color: var(--text-subtle); }
:root.theme-dark .bubble-time { color: var(--text-subtle); }
:root.theme-dark .suggested-prompts .chip,
:root.theme-dark .bestie-quick-chip {
  color: var(--text);
}

/* Dark mode — headers + titles that previously used hard-coded cocoa-700 */
:root.theme-dark .top-bar-title,
:root.theme-dark .you-name,
:root.theme-dark .row-title,
:root.theme-dark .feat-title,
:root.theme-dark .tip-card-title,
:root.theme-dark .stat-tile-value,
:root.theme-dark .article-title,
:root.theme-dark .premium-h1,
:root.theme-dark .welcome-title,
:root.theme-dark .splash-logo,
:root.theme-dark .today-greet,
:root.theme-dark .phase-ring-day,
:root.theme-dark .health-stat-num,
:root.theme-dark .predict-value,
:root.theme-dark .stat-tile-label,
:root.theme-dark .feat-title,
:root.theme-dark .quiz-q,
:root.theme-dark h1, :root.theme-dark h2, :root.theme-dark h3, :root.theme-dark h4,
:root.theme-dark .bday-title,
:root.theme-dark .timer-title,
:root.theme-dark .yoy-year,
:root.theme-dark .log-section-title,
:root.theme-dark .you-section-title,
:root.theme-dark .cal-month-title {
  color: var(--text) !important;
}
:root.theme-dark .article-meta,
:root.theme-dark .tip-card-body,
:root.theme-dark .row-subtitle,
:root.theme-dark .stat-tile-foot,
:root.theme-dark .feat-desc,
:root.theme-dark .timer-sub,
:root.theme-dark .article-eyebrow {
  color: var(--text-muted);
}
:root.theme-dark .splash-logo { color: var(--gh-plum-300) !important; }
:root.theme-dark .welcome-title { color: var(--gh-plum-300) !important; }

/* Dark mode — shop hero keeps cream text since bg is plum gradient */
:root.theme-dark .shop-hero { color: #F1E9DC; }
:root.theme-dark .shop-hero .top-bar-title,
:root.theme-dark .shop-tag { color: #F1E9DC !important; }
:root.theme-dark .shop-eyebrow { color: var(--gh-pink-300); }

/* Dark mode — cards with hardcoded light pink/plum gradients keep dark plum text */
:root.theme-dark .card[style*="gh-pink-100"],
:root.theme-dark .card[style*="gh-plum-100"],
:root.theme-dark .card[style*="FBEAEF"],
:root.theme-dark .card[style*="fbeaef"] {
  color: #2C1F44 !important;
}
:root.theme-dark .card[style*="gh-pink-100"] > .row-h-3 > .flex-1 > div,
:root.theme-dark .card[style*="gh-plum-100"] > .row-h-3 > .flex-1 > div {
  color: #2C1F44;
}
:root.theme-dark .card[style*="gh-pink-100"] .btn-secondary,
:root.theme-dark .card[style*="gh-plum-100"] .btn-secondary {
  background: var(--gh-plum-900);
  color: #F1E9DC;
  border-color: var(--gh-plum-700, #4A3677);
}