/*  REBATE Design System — Tokens & Theme
    All colors, spacing, typography, and radii defined as CSS custom properties.
    Components reference tokens only — never hardcoded values.
    Toggle theme: document.documentElement.setAttribute('data-theme', 'light'|'dark')
*/

/* ── Base reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── @font-face: Axiforma (UI body) ── */
@font-face { font-family: 'Axiforma'; src: url('../fonts/axiforma-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 25%; }
@font-face { font-family: 'Axiforma'; src: url('../fonts/axiforma-medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 25%; }
@font-face { font-family: 'Axiforma'; src: url('../fonts/axiforma-semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 25%; }
@font-face { font-family: 'Axiforma'; src: url('../fonts/axiforma-bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 25%; }

/* ── @font-face: Bebas Neue (display/headings) ── */
@font-face { font-family: 'Bebas Neue'; src: url('../fonts/bebas-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('../fonts/bebas-bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ══════════════════════════════════════════════
   DARK THEME (default)
   ══════════════════════════════════════════════ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ── Background layers (darkest → lightest) ── */
  --bg-base:       #08090c;
  --bg-surface:    #111218;
  --bg-card:       #1a1b23;
  --bg-elevated:   #22232e;
  --bg-hover:      #2a2b38;
  --bg-active:     #323342;

  /* ── Text ── */
  --text-primary:   #e8e9ed;
  --text-secondary: #a1a3b0;
  --text-muted:     #8b8fa3;
  --text-disabled:  #44465a;
  --text-inverse:   #08090c;

  /* ── Borders ── */
  --border-subtle:  #1f2130;
  --border-default: #2a2c3e;
  --border-strong:  #3d3f54;
  --border-focus:   var(--accent-primary);

  /* ── Primary accent — Crimson/Rose (interactive states) ── */
  --accent-primary:       #e63462;
  --accent-primary-hover: #f04a78;
  --accent-primary-muted: #e6346230;
  --accent-primary-glow:  0 0 12px #e6346240;

  /* ── Secondary accent — Gold (highlights, premium) ── */
  --accent-secondary:       #f0b429;
  --accent-secondary-hover: #f5c542;
  --accent-secondary-muted: #f0b42930;

  /* ── Semantic ── */
  --color-success:       #34d399;
  --color-success-muted: #34d39930;
  --color-warning:       #fbbf24;
  --color-warning-muted: #fbbf2430;
  --color-danger:        #f87171;
  --color-danger-muted:  #f8717130;
  --color-info:          #60a5fa;
  --color-info-muted:    #60a5fa30;

  /* ── Data visualization ── */
  --data-1: #6366f1;  /* indigo */
  --data-2: #06b6d4;  /* cyan */
  --data-3: #e63462;  /* crimson */
  --data-4: #22c55e;  /* green */
  --data-5: #f59e0b;  /* amber */
  --data-6: #ec4899;  /* pink */
  --data-7: #f0b429;  /* gold */
  --data-8: #8b5cf6;  /* violet */
  --data-9: #14b8a6;  /* teal */
  --data-10:#ef4444;  /* red */

  /* Half spectrum (warm→cool) */
  --spectrum-1: #f0b429;
  --spectrum-2: #e8922a;
  --spectrum-3: #e0702b;
  --spectrum-4: #d84e2c;
  --spectrum-5: #d0302e;
  --spectrum-6: #c4284a;
  --spectrum-7: #a82870;
  --spectrum-8: #8c2896;
  --spectrum-9: #6c38b0;
  --spectrum-10:#4a52c4;

  /* ── Input fields ── */
  --input-bg:          #141519;
  --input-bg-hover:    #1a1b23;
  --input-bg-focus:    #1a1b23;
  --input-border:      var(--border-default);
  --input-border-focus:var(--accent-primary);
  --input-text:        var(--text-primary);
  --input-placeholder: var(--text-muted);

  /* ── Overlay / Modal ── */
  --overlay-bg: #08090ccc;
  --shadow-sm:  0 1px 2px #00000040;
  --shadow-md:  0 4px 12px #00000060;
  --shadow-lg:  0 8px 32px #00000080;

  /* ── Glass / Frosted surfaces ── */
  --glass-bg: rgba(8,9,12,.75);
  --glass-blur: blur(16px) saturate(1.2);
  --glass-border: var(--border-subtle);
}

/* ══════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════ */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-base:       #f3f4f6;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-elevated:   #f9fafb;
  --bg-hover:      #f0f1f3;
  --bg-active:     #e5e7eb;

  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;
  --text-disabled:  #d1d5db;
  --text-inverse:   #ffffff;

  --border-subtle:  #f0f1f3;
  --border-default: #e5e7eb;
  --border-strong:  #d1d5db;
  --border-focus:   var(--accent-primary);

  --accent-primary:       #d42a54;
  --accent-primary-hover: #be2249;
  --accent-primary-muted: #d42a5412;
  --accent-primary-glow:  0 0 12px #d42a5430;

  --accent-secondary:       #d49b1f;
  --accent-secondary-hover: #c08a18;
  --accent-secondary-muted: #d49b1f12;

  --color-success:       #16a34a;
  --color-success-muted: #16a34a12;
  --color-warning:       #d97706;
  --color-warning-muted: #d9770612;
  --color-danger:        #dc2626;
  --color-danger-muted:  #dc262612;
  --color-info:          #2563eb;
  --color-info-muted:    #2563eb12;

  --data-1: #4f46e5;
  --data-2: #0891b2;
  --data-3: #d42a54;
  --data-4: #16a34a;
  --data-5: #d97706;
  --data-6: #db2777;
  --data-7: #d49b1f;
  --data-8: #7c3aed;
  --data-9: #0d9488;
  --data-10:#dc2626;

  --spectrum-1: #d49b1f;
  --spectrum-2: #cc7c20;
  --spectrum-3: #c45d21;
  --spectrum-4: #bc3e22;
  --spectrum-5: #b42424;
  --spectrum-6: #a8203e;
  --spectrum-7: #8e2060;
  --spectrum-8: #742082;
  --spectrum-9: #5a30a0;
  --spectrum-10:#3e44b4;

  --input-bg:          #ffffff;
  --input-bg-hover:    #f9fafb;
  --input-bg-focus:    #ffffff;
  --input-border:      var(--border-default);
  --input-border-focus:var(--accent-primary);
  --input-text:        var(--text-primary);
  --input-placeholder: var(--text-muted);

  --overlay-bg: #11182780;
  --shadow-sm:  0 1px 2px #0000000d;
  --shadow-md:  0 4px 12px #00000014;
  --shadow-lg:  0 8px 32px #0000001a;

  /* ── Glass / Frosted surfaces ── */
  --glass-bg: rgba(255,255,255,.7);
  --glass-blur: blur(16px) saturate(1.2);
  --glass-border: var(--border-default);
}

/* ── OS preference auto-detect ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Inherit light values — copy from above or use @extend */
  }
}

/* ══════════════════════════════════════════════
   SHARED TOKENS (theme-independent)
   ══════════════════════════════════════════════ */
:root {
  /* ── Typography ── */
  --font-sans:    'Axiforma', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ── Spacing scale (4px base) ── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ── */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill:  999px;
  --radius-round: 50%;

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;

  /* ── Z-index scale ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ══════════════════════════════════════════════
   BASE STYLES
   ══════════════════════════════════════════════ */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar (dark-friendly) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ══════════════════════════════════════════════
   COMPONENT SYSTEM
   Reusable UI primitives built on design tokens.
   All components use token references only.
   ══════════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0 var(--space-4); height: 36px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semi);
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap; text-decoration: none; line-height: 1;
}
.btn .icon { width: 15px; height: 15px; flex-shrink: 0; }
.btn--sm { height: 30px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { height: 42px; padding: 0 var(--space-5); font-size: var(--text-base); }
.btn--icon { width: 36px; padding: 0; }
.btn--icon.btn--sm { width: 30px; }

.btn--primary { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.btn--primary:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); }
.btn--secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn--destructive { background: var(--color-danger-muted); color: var(--color-danger); border-color: transparent; }
.btn--destructive:hover { background: var(--color-danger); color: #fff; }
.btn--accent { background: var(--accent-secondary-muted); color: var(--accent-secondary); border-color: transparent; }
.btn--accent:hover { background: var(--accent-secondary); color: var(--text-inverse); }
.btn:disabled, .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── Inputs ── */
.input {
  height: 36px; padding: 0 var(--space-3);
  font-family: var(--font-sans); font-size: var(--text-base);
  background: var(--input-bg); color: var(--input-text);
  border: 1px solid var(--input-border); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), background var(--duration-fast);
  outline: none; width: 100%;
}
.input::placeholder { color: var(--input-placeholder); }
.input:hover { background: var(--input-bg-hover); }
.input:focus { border-color: var(--input-border-focus); background: var(--input-bg-focus); box-shadow: 0 0 0 3px var(--accent-primary-muted); }
.input--sm { height: 30px; font-size: var(--text-sm); }
.input--lg { height: 42px; font-size: var(--text-md); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 1px 8px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--weight-semi);
  line-height: 1.6; white-space: nowrap;
}
.badge--default { background: var(--bg-hover); color: var(--text-secondary); }
.badge--primary { background: var(--accent-primary-muted); color: var(--accent-primary); }
.badge--success { background: var(--color-success-muted); color: var(--color-success); }
.badge--warning { background: var(--color-warning-muted); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-muted); color: var(--color-danger); }
.badge--info { background: var(--color-info-muted); color: var(--color-info); }
.badge--ai { background: var(--accent-secondary-muted); color: var(--accent-secondary); }
.badge--gold { background: var(--accent-secondary-muted); color: var(--accent-secondary); }

/* ── Cards ── */
.card {
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.card:hover { border-color: var(--border-strong); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { border-color: var(--accent-secondary); box-shadow: 0 0 20px rgba(240,180,41,.12); }
.card__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); }
.card__body { padding: var(--space-4) var(--space-5); }
.card__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-default); }

/* ── Dividers ── */
.divider { width: 1px; height: 24px; background: var(--border-default); flex-shrink: 0; opacity: .5; }
.divider--horizontal { width: 100%; height: 1px; }
.divider--strong { opacity: 1; }

/* ── Tags (Bebas Neue) ── */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  background: var(--bg-hover); color: var(--text-secondary);
}
.tag--accent { background: var(--accent-secondary-muted); color: var(--accent-secondary); }
.tag--primary { background: var(--accent-primary-muted); color: var(--accent-primary); }

/* ── Dropdown / Menu ── */
.dropdown {
  display: none; position: absolute;
  min-width: 180px; padding: var(--space-1);
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(0,0,0,.4);
  z-index: var(--z-dropdown); overflow: hidden;
}
.dropdown.open { display: block; animation: dropdownIn .12s ease-out; }
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dropdown__item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2) var(--space-3);
  border: none; background: none; color: var(--text-primary);
  font-size: var(--text-sm); font-family: var(--font-sans);
  cursor: pointer; border-radius: var(--radius-md); transition: background var(--duration-fast);
}
.dropdown__item:hover { background: var(--bg-hover); }
.dropdown__item .icon { width: 15px; height: 15px; color: var(--text-muted); }
.dropdown__item--danger { color: var(--color-danger); }
.dropdown__item--danger .icon { color: var(--color-danger); }
.dropdown__divider { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }

/* ── Tooltip ── */
.ex-stat-card[data-tooltip], .meta-item[data-tooltip], th[data-tooltip], .detail-row[data-tooltip], .cultural-badge[data-tooltip] { position: relative; }
.ex-stat-card[data-tooltip]:hover::after, .meta-item[data-tooltip]:hover::after, th[data-tooltip]:hover::after, .detail-row[data-tooltip]:hover::after, .cultural-badge[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-default); box-shadow: var(--shadow-md);
  font-size: var(--text-xs); z-index: var(--z-toast);
  pointer-events: none; animation: tooltipIn .15s ease-out;
  max-width: 320px; white-space: normal; line-height: 1.4;
}
@keyframes tooltipIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ── Icon Button (bare) ── */
.icon-btn {
  width: 32px; height: 32px; border: none; background: none;
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--radius-md); padding: 0;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn--sm { width: 28px; height: 28px; }
.icon-btn--sm .icon { width: 15px; height: 15px; }

/* ── Glass Surface ── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* ── Text Utilities ── */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary { color: var(--text-primary); }
.text-accent { color: var(--accent-primary); }
.text-gold { color: var(--accent-secondary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-bold { font-weight: var(--weight-bold); }
.text-semi { font-weight: var(--weight-semi); }
.text-mono { font-family: var(--font-mono); }
.text-display { font-family: var(--font-display); letter-spacing: var(--tracking-caps); text-transform: uppercase; }