/*
  PayPal Sales Dashboard — Design Tokens v2
  crm.thevinchecker.com
  ─────────────────────────────────────────
  Load order: vin-tokens.css → vin-model.css → page
*/

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

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Accent — brand orange */
  --accent:        #e8942e;
  --accent-bright: #f5a84a;
  --accent-dim:    #c47820;
  --accent-on:     #1a1208;
  --accent-sub:    rgba(232,148,46,0.10);
  --accent-bd:     rgba(232,148,46,0.26);

  /* Type scale */
  --sz-xs:  11px;  --sz-sm: 12px;  --sz-base: 14px;
  --sz-md:  15px;  --sz-lg: 18px;  --sz-xl:  22px;
  --sz-2xl: 28px;  --sz-3xl: 36px; --sz-4xl: 48px;

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* Radii */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;
  --r-xl: 20px; --r-2xl:24px; --r-pill:999px;

  /* Layout */
  --sb-w: 240px;
  --top-h: 52px;

  /* Tier palette */
  --tier-basic-c:    #e8942e; --tier-basic-bg:    rgba(232,148,46,0.10);
  --tier-standard-c: #60a5fa; --tier-standard-bg: rgba(96,165,250,0.10);
  --tier-gold-c:     #a3e635; --tier-gold-bg:     rgba(163,230,53,0.10);

  /* Transitions */
  --t-f: 100ms ease; --t-b: 160ms ease; --t-s: 280ms ease;
}

/* ═══ DARK (default) ════════════════════════════════════════════ */
html, html[data-theme="dark"] {
  color-scheme: dark;
  scrollbar-color: rgba(232,148,46,.25) rgba(255,255,255,.04);
  scrollbar-width: thin;

  /* Depth layers */
  --bg-canvas:   #040406;
  --bg-app:      #07070a;
  --bg-surface:  #0d0d14;
  --bg-elevated: #121220;
  --bg-overlay:  #1a1a28;

  /* Text */
  --tx:   #f4efe6;
  --tx-2: #9e9282;
  --tx-3: #6a5e52;
  --tx-4: #38302a;
  --tx-inv: #0f0d0a;

  /* Borders */
  --b0: rgba(255,255,255,.04);
  --b1: rgba(255,255,255,.07);
  --b2: rgba(255,255,255,.12);
  --b3: rgba(255,255,255,.20);

  /* Sidebar */
  --sb-bg:     #07070c;
  --sb-border: rgba(255,255,255,.07);
  --sb-tx:     #847870;
  --sb-act-bg: rgba(232,148,46,.11);
  --sb-act-fg: #f4efe6;
  --sb-hov-bg: rgba(255,255,255,.05);
  --sb-sec:    #3d3530;

  /* Card */
  --card-bg:  #0e0e18;
  --card-bd:  rgba(255,255,255,.075);
  --card-sh:  0 1px 3px rgba(0,0,0,.60), 0 4px 16px rgba(0,0,0,.35);
  --card-shl: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.60);

  /* Topbar */
  --top-bg:  rgba(7,7,10,.92);
  --top-bd:  rgba(255,255,255,.07);

  /* Table */
  --tb-bd:     rgba(255,255,255,.07);
  --tb-hd-bg:  rgba(4,4,8,.60);
  --tb-hd-fg:  #504842;
  --tb-row:    transparent;
  --tb-alt:    rgba(255,255,255,.018);
  --tb-hov:    rgba(232,148,46,.05);

  /* Input */
  --inp-bg:  rgba(255,255,255,.04);
  --inp-bd:  rgba(255,255,255,.10);
  --inp-foc: rgba(232,148,46,.65);
  --inp-ph:  #3a302a;

  /* Status — fulfillment */
  --st-pend-c:  #f59e0b; --st-pend-bg:  rgba(245,158,11,.12); --st-pend-bd: rgba(245,158,11,.28);
  --st-prog-c:  #60a5fa; --st-prog-bg:  rgba(96,165,250,.12);  --st-prog-bd: rgba(96,165,250,.28);
  --st-sent-c:  #4ade80; --st-sent-bg:  rgba(74,222,128,.10);  --st-sent-bd: rgba(74,222,128,.28);
  --st-void-c:  #f87171; --st-void-bg:  rgba(248,113,113,.12); --st-void-bd: rgba(248,113,113,.28);

  /* Attendance */
  --at-pre-c: #4ade80; --at-pre-bg: rgba(74,222,128,.10);
  --at-abs-c: #f87171; --at-abs-bg: rgba(248,113,113,.12);
  --at-lat-c: #fbbf24; --at-lat-bg: rgba(251,191,36,.12);
  --at-hlf-c: #22d3ee; --at-hlf-bg: rgba(34,211,238,.12);
  --at-lea-c: #c084fc; --at-lea-bg: rgba(192,132,252,.12);
  --at-unk-c: #64748b; --at-unk-bg: rgba(100,116,139,.12);

  /* Semantic */
  --danger:    #f87171; --danger-bg:  rgba(248,113,113,.10); --danger-bd:  rgba(248,113,113,.25);
  --success:   #4ade80; --success-bg: rgba(74,222,128,.10);  --success-bd: rgba(74,222,128,.25);
  --warn:      #fbbf24; --warn-bg:    rgba(251,191,36,.10);  --warn-bd:    rgba(251,191,36,.25);
  --info:      #60a5fa; --info-bg:    rgba(96,165,250,.10);  --info-bd:    rgba(96,165,250,.25);

  /* Buttons */
  --btn-p-bg: #e8942e; --btn-p-h: #f0a84a; --btn-p-fg: #1a1208;
  --btn-s-bg: rgba(255,255,255,.06); --btn-s-h: rgba(255,255,255,.10);
  --btn-s-fg: #9e9282; --btn-s-bd: rgba(255,255,255,.09);
  --btn-g-fg: #847870;
  --btn-d-bg: rgba(248,113,113,.10); --btn-d-h: rgba(248,113,113,.18);
  --btn-d-fg: #fca5a5; --btn-d-bd: rgba(248,113,113,.28);

  --focus: 0 0 0 2px rgba(232,148,46,.55);
}

/* ═══ LIGHT ═════════════════════════════════════════════════════ */
html[data-theme="light"] {
  color-scheme: light;
  scrollbar-color: rgba(232,148,46,.30) rgba(0,0,0,.06);

  --bg-canvas:   #e8e4de;
  --bg-app:      #f2ede6;
  --bg-surface:  #f8f5f0;
  --bg-elevated: #ffffff;
  --bg-overlay:  #ffffff;

  --tx:   #1a1208;
  --tx-2: #4a3c2e;
  --tx-3: #8a7a6a;
  --tx-4: #c8b8a8;
  --tx-inv: #ffffff;

  --b0: rgba(0,0,0,.03);
  --b1: rgba(0,0,0,.07);
  --b2: rgba(0,0,0,.12);
  --b3: rgba(0,0,0,.20);

  --sb-bg:     #ffffff;
  --sb-border: rgba(0,0,0,.08);
  --sb-tx:     #7a6a5a;
  --sb-act-bg: rgba(232,148,46,.10);
  --sb-act-fg: #1a1208;
  --sb-hov-bg: rgba(0,0,0,.04);
  --sb-sec:    #c0b0a0;

  --card-bg: #ffffff;
  --card-bd: rgba(0,0,0,.08);
  --card-sh: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --card-shl: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);

  --top-bg: rgba(248,245,240,.94);
  --top-bd: rgba(0,0,0,.08);

  --tb-bd:    rgba(0,0,0,.07);
  --tb-hd-bg: rgba(240,236,230,.80);
  --tb-hd-fg: #8a7a6a;
  --tb-row:   transparent;
  --tb-alt:   rgba(0,0,0,.020);
  --tb-hov:   rgba(232,148,46,.04);

  --inp-bg:  #ffffff;
  --inp-bd:  rgba(0,0,0,.13);
  --inp-foc: rgba(232,148,46,.70);
  --inp-ph:  #c0b0a0;

  --st-pend-c:  #d97706; --st-pend-bg: rgba(217,119,6,.10); --st-pend-bd: rgba(217,119,6,.25);
  --st-prog-c:  #2563eb; --st-prog-bg: rgba(37,99,235,.10); --st-prog-bd: rgba(37,99,235,.25);
  --st-sent-c:  #16a34a; --st-sent-bg: rgba(22,163,74,.10); --st-sent-bd: rgba(22,163,74,.25);
  --st-void-c:  #dc2626; --st-void-bg: rgba(220,38,38,.10); --st-void-bd: rgba(220,38,38,.25);

  --at-pre-c:#16a34a; --at-pre-bg:rgba(22,163,74,.10);
  --at-abs-c:#dc2626; --at-abs-bg:rgba(220,38,38,.10);
  --at-lat-c:#d97706; --at-lat-bg:rgba(217,119,6,.10);
  --at-hlf-c:#0891b2; --at-hlf-bg:rgba(8,145,178,.10);
  --at-lea-c:#7c3aed; --at-lea-bg:rgba(124,58,237,.10);
  --at-unk-c:#6b7280; --at-unk-bg:rgba(107,114,128,.10);

  --danger:  #dc2626; --danger-bg: rgba(220,38,38,.08); --danger-bd: rgba(220,38,38,.22);
  --success: #16a34a; --success-bg:rgba(22,163,74,.08);  --success-bd:rgba(22,163,74,.22);
  --warn:    #d97706; --warn-bg:   rgba(217,119,6,.08);  --warn-bd:   rgba(217,119,6,.22);
  --info:    #2563eb; --info-bg:   rgba(37,99,235,.08);  --info-bd:   rgba(37,99,235,.22);

  --btn-p-bg:#e8942e; --btn-p-h:#d4821a; --btn-p-fg:#ffffff;
  --btn-s-bg:rgba(0,0,0,.04); --btn-s-h:rgba(0,0,0,.08);
  --btn-s-fg:#4a3c2e; --btn-s-bd:rgba(0,0,0,.10);
  --btn-g-fg:#6b5e52;
  --btn-d-bg:rgba(220,38,38,.08); --btn-d-h:rgba(220,38,38,.15);
  --btn-d-fg:#991b1b; --btn-d-bd:rgba(220,38,38,.22);

  --focus: 0 0 0 2px rgba(232,148,46,.45);
}