/*  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; }

/* ── @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; }
@font-face { font-family: 'Axiforma'; src: url('../fonts/axiforma-medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Axiforma'; src: url('../fonts/axiforma-semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Axiforma'; src: url('../fonts/axiforma-bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── @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:     #6b6e7f;
  --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: #e6346218;
  --accent-primary-glow:  0 0 12px #e6346240;

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

  /* ── Semantic ── */
  --color-success:       #34d399;
  --color-success-muted: #34d39918;
  --color-warning:       #fbbf24;
  --color-warning-muted: #fbbf2418;
  --color-danger:        #f87171;
  --color-danger-muted:  #f8717118;
  --color-info:          #60a5fa;
  --color-info-muted:    #60a5fa18;

  /* ── 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;
}

/* ══════════════════════════════════════════════
   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;
}

/* ── 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); }