/* SINGLE SOURCE OF TRUTH for all MyPariva colors.
   Do not add inline hex colors anywhere else in the codebase.
   Add a new token here first, then reference it with var(--mp-*). */

:root {
  /* ===== BRAND / PRIMARY PINK ===== */
  --mp-pink-50:  #FFF7FB;
  --mp-pink-100: #FCE7F0;
  --mp-pink-200: #F8D6E4;
  --mp-pink-300: #F7A8C6;
  --mp-pink-400: #F472B6;
  --mp-pink-500: #E91E78; /* BRAND PRIMARY - never alter */
  --mp-pink-600: #C2306A; /* hover / pressed */
  --mp-pink-700: #B81560; /* dark accents, headings on light bg */

  /* ===== NEUTRAL / INK (text & surfaces) ===== */
  --mp-ink-900: #2A1A22; /* primary headings */
  --mp-ink-700: #4A2638; /* secondary text */
  --mp-ink-600: #4B5563; /* body text on light surfaces */
  --mp-ink-500: #6B5560; /* muted / helper text */
  --mp-ink-400: #9CA3AF; /* placeholder / disabled */
  --mp-ink-300: #CBD5E1; /* borders */
  --mp-ink-200: #E5E7EB; /* dividers */
  --mp-ink-100: #F1F5F9; /* subtle surface */
  --mp-ink-50:  #F8FAFC; /* page background */
  --mp-white:   #FFFFFF;

  /* ===== CYCLE PHASE COLORS ===== */
  --mp-phase-period-base:      var(--mp-pink-500);
  --mp-phase-period-bg:        var(--mp-pink-100);
  --mp-phase-follicular-base:  #F4C5A8;
  --mp-phase-follicular-bg:    #FFF4EC;
  --mp-phase-fertile-base:     #E88986;
  --mp-phase-fertile-bg:       #FFF0EF;
  --mp-phase-luteal-base:      #B197FC;
  --mp-phase-luteal-bg:        #EDE9FE;
  --mp-phase-safe-base:        #34D399;

  /* ===== STATUS (base / bg / text) ===== */
  --mp-success-base: #10B981;
  --mp-success-bg:   #D1FAE5;
  --mp-success-text: #065F46;

  --mp-warning-base: #F59E0B;
  --mp-warning-bg:   #FEF3C7;
  --mp-warning-text: #92400E;

  --mp-error-base: #DC2626;
  --mp-error-bg:   #FEE2E2;
  --mp-error-text: #991B1B;

  --mp-info-base: #2563EB;
  --mp-info-bg:   #DBEAFE;
  --mp-info-text: #075985;
}

:root[data-theme="dark"] {
  /* ===== BRAND / PRIMARY PINK (dark) ===== */
  --mp-pink-50:  #2A1420;
  --mp-pink-100: #3A1B2C;
  --mp-pink-200: #4A2438;
  --mp-pink-300: #6B2F4A;
  --mp-pink-400: #F472B6;
  --mp-pink-500: #E91E78; /* BRAND PRIMARY - unchanged in dark mode too */
  --mp-pink-600: #F0529C;
  --mp-pink-700: #F7A8C6;

  /* ===== NEUTRAL / INK (dark) - inverted ===== */
  --mp-ink-900: #F5F0F2;
  --mp-ink-700: #D8C8D0;
  --mp-ink-600: #C4B8BE;
  --mp-ink-500: #9C8B93;
  --mp-ink-400: #6B5D63;
  --mp-ink-300: #423840;
  --mp-ink-200: #352C33;
  --mp-ink-100: #241D22;
  --mp-ink-50:  #1A1418;
  --mp-white:   #221A1F;

  /* ===== CYCLE PHASE COLORS (dark) ===== */
  --mp-phase-period-base:      var(--mp-pink-500);
  --mp-phase-period-bg:        var(--mp-pink-100);
  --mp-phase-follicular-base:  #F4C5A8;
  --mp-phase-follicular-bg:    #3A2A1E;
  --mp-phase-fertile-base:     #EFA19D;
  --mp-phase-fertile-bg:       #3A2320;
  --mp-phase-luteal-base:      #C4AEFF;
  --mp-phase-luteal-bg:        #2A2340;
  --mp-phase-safe-base:        #34D399;

  /* ===== STATUS (dark) ===== */
  --mp-success-base: #34D399;
  --mp-success-bg:   #113328;
  --mp-success-text: #6EE7B7;

  --mp-warning-base: #FBBF24;
  --mp-warning-bg:   #3D2E0A;
  --mp-warning-text: #FCD34D;

  --mp-error-base: #F87171;
  --mp-error-bg:   #3D1414;
  --mp-error-text: #FCA5A5;

  --mp-info-base: #60A5FA;
  --mp-info-bg:   #112A4D;
  --mp-info-text: #93C5FD;
}

:root[data-theme="dark"] body {
  background: var(--mp-ink-50);
  color: var(--mp-ink-600);
}

:root[data-theme="dark"] .bg-white {
  background-color: var(--mp-white) !important;
}

:root[data-theme="dark"] .bg-light {
  background-color: var(--mp-ink-100) !important;
}

:root[data-theme="dark"] .text-dark {
  color: var(--mp-ink-900) !important;
}

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary {
  color: var(--mp-ink-500) !important;
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-end,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start {
  border-color: var(--mp-ink-200) !important;
}