/* ── shared site theme ── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,500;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600&display=swap');

:root {
  color-scheme: only dark;

  /* ═══════════════════════════════
     TIER 1 — PALETTE
     Edit these hex values to retheme the site.
  ═══════════════════════════════ */

  /* Purple scale (lightest → darkest) */
  --purple-50:  #f3ecf9;   /* body + input fill */
  --purple-100: #f5f0ff;   /* content box + accordion surfaces */
  --purple-200: #ccd3fc;   /* hover backgrounds, inactive carousel dots */
  --purple-300: #b3a8e0;   /* active buttons, nav header, image placeholders */
  --purple-400: #9d91ce;   /* borders */

  /* Neutral gray scale */
  --gray-100: #e0e0e0;     /* subtle borders (cart rows, tables) */
  --gray-400: #aaa;        /* faint text (separators, arrows, inactive) */
  --gray-500: #888;        /* muted text (hints, labels, counts) */
  --gray-600: #555;        /* secondary text (button labels) */
  --gray-700: #333;        /* input text */
  --gray-800: #222;        /* primary body text */

  /* Status */
  --green-status: #90e8a8;
  --red-status:   #f0a0a0;

  /* Black/white inversion (hover states) */
  --color-on-hover:    #fff;   /* text on --color-hover bg */
  --color-inv-bg:      #fff;   /* full-inversion hover background */
  --color-inv-text:    #000;   /* full-inversion hover text */

  /* Primary dark button (add-to-cart, etc.) */
  --color-dark-btn:        var(--color-accent);
  --color-dark-btn-text:   #000;                  /* text on purple button */
  --color-dark-btn-border: #000000;
  --color-dark-btn-hv:     var(--color-border);

  /* Links + danger */
  --blue: #4c82e0;
  --red:  #c00;
  --pink: #ffaaE4;
  --purple: var(--purple-300);

  /* Font families */
  --font-mono:    'Courier New', Courier, monospace;
  --font-mono:    'Inter', sans-serif;
  --font-mono: 'Exo 2', sans-serif;
  --font-mono: 'Oxanium', sans-serif;

  --font-display: 'Orbitron', 'Courier New', monospace;

  /* Semantic font roles */
  --font-body:  var(--font-mono);     /* all content, forms, UI */
  --font-brand: var(--font-display);  /* navbar brand + nav items */

  /* Transitions */
  --transition-fast:     0.15s;
  --transition-base:     0.2s;
  --transition-slow:     0.35s;
  --transition-carousel: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Shape */
  --radius: 0px;

  /* ═══════════════════════════════
     TIER 2 — SEMANTIC ALIASES
     Maps palette values to roles.
     Change a role here to reassign it
     without touching individual CSS files.
  ═══════════════════════════════ */

  /* Backgrounds */
  --color-bg:      #000000;    /* page background + input fills */
  --color-surface: #292430;    /* content boxes, accordion, carousel items */

  /* Interactive */
  --color-hover:   var(--purple-200);  /* hover bg on themed elements */
  --color-accent:  var(--purple-300);  /* active tabs, nav header, active buttons */
  --color-border:  var(--purple-400);  /* themed borders */

  /* Text */
  --color-text:           #ffffff;              /* primary body text */
  --color-text-secondary: var(--purple-300);    /* button labels, secondary elements */
  --color-text-muted:     var(--purple-300);    /* hints, labels, counts */
  --color-text-faint:     var(--gray-400);      /* separators, arrows, placeholders */
  --color-text-input:     #ffffff;              /* form input values */
  --color-text-on-accent: #000000;              /* text on accent/dark backgrounds */

  /* Borders */
  --color-border-subtle: #000000;              /* cart rows, tables */

  /* Links + actions */
  --color-link:    #ffffff;           /* links + cart details */
  --color-danger:  var(--purple-300); /* destructive actions */

  /* Status indicators */
  --color-status-online:  var(--green-status);
  --color-status-offline: var(--red-status);

}

/* ── light mode (opt-in) ── */
html[data-theme="light"] {
  color-scheme: only light;
  --color-bg:             var(--purple-50);
  --color-surface:        var(--purple-100);
  --color-hover:          var(--purple-200);
  --color-accent:         var(--purple-300);
  --color-border:         var(--purple-400);
  --color-text:           var(--gray-800);
  --color-text-secondary: var(--gray-600);
  --color-text-muted:     var(--gray-500);
  --color-text-faint:     var(--gray-400);
  --color-text-input:     var(--gray-700);
  --color-text-on-accent: #000000;
  --color-border-subtle:  var(--gray-100);
  --color-on-hover:       #000;
  --color-inv-bg:         #fff;
  --color-inv-text:       #000;
  --color-dark-btn:        #333;
  --color-dark-btn-text:   #fff;
  --color-dark-btn-border: #333;
  --color-dark-btn-hv:     #000;
  --color-link:            var(--blue);
  --color-danger:          #000000;
}

/* ── dark pink mode ── */
html[data-theme="dark"] {
  color-scheme: only dark;
  --color-bg:             #000000;
  --color-surface:        #292430;
  --color-hover:          var(--pink);
  --color-accent:         var(--pink);
  --color-text-on-accent: #000;
  --color-border:         var(--pink);
  --color-text:           #ffffff;
  --color-text-secondary: var(--pink);
  --color-text-muted:     var(--pink);
  --color-text-faint:     var(--gray-400);
  --color-text-input:     #ffffff;
  --color-border-subtle:  #000000;
  --color-on-hover:       var(--color-text);
  --color-inv-bg:         var(--color-text);
  --color-inv-text:       var(--color-bg);
  --color-dark-btn:        var(--color-accent);
  --color-dark-btn-text:   #000;                  /* black text on pink button */
  --color-dark-btn-border: #000000;
  --color-dark-btn-hv:     var(--color-border);

  --color-link:           white;        /* links + cart details */
  --color-danger:         var(--pink);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.nav-header {
  display: block;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: 1px solid var(--color-border);
  border-bottom: none;
  padding: 12px 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.2em;
  font-weight: bold;
}

.content-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 16px;
}