/* =========================================================
   App theme: Magenta + Gold
   Drop this file into your project and link it before your
   other stylesheets:  <link rel="stylesheet" href="theme.css">
   ========================================================= */

/* ---------- 1. Raw palette (don't use these directly in components) ---------- */
:root {
  --magenta-50:  #FDF2F8;
  --magenta-100: #FCE7F3;
  --magenta-500: #EC4899;
  --magenta-600: #DB2777;
  --magenta-700: #BE185D;

  --gold-100: #FEF4DC;
  --gold-400: #F4B942;
  --gold-600: #B7791F;
  --gold-800: #7A4E0E;

  --plum-900: #2E1065;
  --plum-950: #15101F;

  --teal-500: #14B8A6;
  --blue-500: #3B82F6;
  --red-600:  #DC2626;
}

/* ---------- 2. Semantic tokens: LIGHT mode (default) ---------- */
:root {
  /* Surfaces */
  --color-bg:            #FFF9F5;   /* page background (warm white) */
  --color-surface:       #FFFFFF;   /* cards, modals */
  --color-surface-alt:   #FAF3F0;   /* subtle sections, table stripes */
  --color-border:        #F1E9EE;
  --color-nav:           var(--plum-900);  /* header / sidebar */
  --color-on-nav:        #FFFFFF;

  /* Text */
  --color-text:          #1F1A24;
  --color-text-muted:    #6B6475;
  --color-link:          var(--magenta-600);

  /* Primary (magenta) — main actions */
  --color-primary:        var(--magenta-600);  /* #DB2777 passes AA with white text */
  --color-primary-hover:  var(--magenta-700);
  --color-primary-bright: var(--magenta-500);  /* large shapes, progress bars, icons */
  --color-primary-tint:   var(--magenta-100);
  --color-on-primary:     #FFFFFF;

  /* Highlight (gold) — badges, ratings, premium, warnings */
  --color-highlight:      var(--gold-400);
  --color-highlight-tint: var(--gold-100);
  --color-on-highlight:   var(--gold-800);     /* dark text on gold, never white */
  --color-highlight-text: var(--gold-600);     /* gold-ish text on light bg */

  /* Status */
  --color-success: var(--teal-500);
  --color-info:    var(--blue-500);
  --color-danger:  var(--red-600);
  --color-warning: var(--gold-400);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(236, 72, 153, 0.35);
}

/* ---------- 3. Semantic tokens: DARK mode ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:           var(--plum-950);
    --color-surface:      #1F1830;
    --color-surface-alt:  #261D3A;
    --color-border:       #352A4A;
    --color-nav:          #1A1428;

    --color-text:         #F5EEF8;
    --color-text-muted:   #B3A8C2;
    --color-link:         #F472B6;

    --color-primary:        var(--magenta-500);
    --color-primary-hover:  #F472B6;
    --color-primary-tint:   #3D1530;
    --color-highlight-tint: #3A2A0E;
    --color-on-highlight:   #2A1A04;
    --color-highlight-text: var(--gold-400);
  }
}
/* Manual toggle: <html data-theme="dark"> */
:root[data-theme="dark"] {
  --color-bg:           var(--plum-950);
  --color-surface:      #1F1830;
  --color-surface-alt:  #261D3A;
  --color-border:       #352A4A;
  --color-nav:          #1A1428;

  --color-text:         #F5EEF8;
  --color-text-muted:   #B3A8C2;
  --color-link:         #F472B6;

  --color-primary:        var(--magenta-500);
  --color-primary-hover:  #F472B6;
  --color-primary-tint:   #3D1530;
  --color-highlight-tint: #3A2A0E;
  --color-on-highlight:   #2A1A04;
  --color-highlight-text: var(--gold-400);
}

/* ---------- 4. Base styles ---------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--color-link); }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- 5. Components ---------- */
.navbar {
  background: var(--color-nav);
  color: var(--color-on-nav);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
}

.btn {
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-alt); }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}
.badge-gold    { background: var(--color-highlight-tint); color: var(--color-on-highlight); }
.badge-magenta { background: var(--color-primary-tint);   color: var(--color-primary); }

.progress       { height: 8px; background: var(--color-primary-tint); border-radius: 8px; }
.progress > div { height: 100%; background: var(--color-primary-bright); border-radius: 8px; }

.alert         { padding: 0.75rem 1rem; border-radius: 8px; border-left: 4px solid; }
.alert-success { border-color: var(--color-success); }
.alert-danger  { border-color: var(--color-danger); }
.alert-warning { border-color: var(--color-warning); }