/* ============================================================
   AUCTION PLATFORM — Design Tokens
   Sport-utility aesthetic: dense information, high contrast,
   confident color. Feels like a scoreboard, not a SaaS dashboard.
   ============================================================ */

:root {
  /* Base palette — dark navy + electric teal accent */
  --navy:        #0B1628;
  --navy-mid:    #152236;
  --navy-light:  #1E3050;
  --teal:        #00C9A7;
  --teal-dim:    #00A589;
  --teal-muted:  #00C9A720;
  --gold:        #F5C842;
  --gold-dim:    #C9A030;
  --white:       #FFFFFF;
  --off-white:   #F0F4F8;
  --muted:       #8FA3BC;
  --danger:      #E8503A;
  --danger-bg:   #E8503A18;
  --success:     #34C97A;
  --success-bg:  #34C97A18;
  --warning:     #F5C842;
  --warning-bg:  #F5C84218;

  /* Surfaces */
  --surface-page:  var(--navy);
  --surface-card:  var(--navy-mid);
  --surface-raised: var(--navy-light);
  --surface-input: #0D1E33;

  /* Text */
  --text-primary:   var(--white);
  --text-secondary: var(--muted);
  --text-accent:    var(--teal);
  --text-gold:      var(--gold);
  --btn-text:       var(--navy);  /* text on teal/gold buttons — override in identity packs */

  /* Borders */
  --border:        #1E3050;
  --border-strong: #2A4568;
  --border-accent: var(--teal);

  /* Typography */
  --font-ui:      'Inter', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  /* Numeral font: elegant Latin-style figures for bid amounts & scores (not mono) */
  --font-numeral: 'Playfair Display', 'Georgia', 'Times New Roman', serif;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radii */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-pop:  0 8px 32px rgba(0,0,0,0.6);

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  180ms;

  /* Layout */
  --sidebar-w:    240px;
  --topbar-h:     56px;
  --content-max:  1100px;
}

/* Light mode override — admin login page only */
.light-mode {
  --surface-page:   #F0F4F8;
  --surface-card:   #FFFFFF;
  --surface-raised: #E8EEF5;
  --surface-input:  #FFFFFF;
  --text-primary:   #0B1628;
  --text-secondary: #4A6080;
  --border:         #D0DCE8;
  --border-strong:  #B0C4D8;
}

/* ── Full light theme — data-theme="light" on <html> ──────────────────────
   Designed for projector / bright-room use: high contrast on white.
   Teal accent is shifted slightly darker for contrast on light bg.
   ─────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --navy:        #F0F4F8;
  --navy-mid:    #FFFFFF;
  --navy-light:  #E2EAF2;
  --teal:        #00916C;      /* darker teal for contrast on white */
  --teal-dim:    #006E52;
  --teal-muted:  #00916C15;
  --gold:        #B5860D;
  --gold-dim:    #8A6508;
  --muted:       #6B7F96;
  --danger:      #C0392B;
  --danger-bg:   #C0392B12;
  --success:     #1A8C50;
  --success-bg:  #1A8C5012;
  --warning:     #B5860D;
  --warning-bg:  #B5860D12;

  --surface-page:   #F0F4F8;
  --surface-card:   #FFFFFF;
  --surface-raised: #E2EAF2;
  --surface-input:  #FFFFFF;

  --text-primary:   #0B1628;
  --text-secondary: #4A5E78;
  --text-accent:    #00916C;
  --text-gold:      #B5860D;
  --text:           #0B1628;
  --btn-text:       #FFFFFF;  /* light mode: teal is dark, white text on teal buttons */

  --border:         #C8D8E8;
  --border-strong:  #A8BED4;
  --border-accent:  #00916C;

  --shadow-card: 0 2px 12px rgba(0,0,0,0.10);
  --shadow-pop:  0 8px 32px rgba(0,0,0,0.18);
}

/* Invert hard-coded rgba dark overlays in light mode */
[data-theme="light"] body {
  background: var(--surface-page);
  color: var(--text-primary);
}

/* ── Explicit dark mode — data-theme="dark" on <html> ──────────────────────
   Mirrors :root defaults so toggling to dark always produces correct values
   even if inline styles were cleared.
   ─────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --navy:        #0B1628;
  --navy-mid:    #152236;
  --navy-light:  #1E3050;
  --teal:        #00C9A7;
  --teal-dim:    #00A589;
  --teal-muted:  #00C9A720;
  --gold:        #F5C842;
  --gold-dim:    #C9A030;
  --muted:       #8FA3BC;
  --danger:      #E8503A;
  --danger-bg:   #E8503A18;
  --success:     #34C97A;
  --success-bg:  #34C97A18;
  --warning:     #F5C842;
  --warning-bg:  #F5C84218;

  --surface-page:   #0B1628;
  --surface-card:   #152236;
  --surface-raised: #1E3050;
  --surface-input:  #0D1E33;

  --text-primary:   #FFFFFF;
  --text-secondary: #8FA3BC;
  --text-accent:    #00C9A7;
  --text-gold:      #F5C842;
  --text:           #FFFFFF;
  --btn-text:       var(--navy);  /* dark mode: mirrors :root default */

  --border:         #1E3050;
  --border-strong:  #2A4568;
  --border-accent:  #00C9A7;

  --shadow-card: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-pop:  0 8px 32px rgba(0,0,0,0.6);
}

[data-theme="dark"] body {
  background: var(--surface-page);
  color: var(--text-primary);
}