/* ═══════════════════════════════════════════════════
   KAPISH WEB — Design Tokens
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Brand colors ── */
  --violet:     #8a64ff;
  --violet-dim: #6b4fd4;
  --pink:       #ec4899;
  --green:      #22c55e;
  --amber:      #f59e0b;
  --red:        #ef4444;
  --cyan:       #06b6d4;

  /* ── Backgrounds ── */
  --bg:         #080512;
  --bg-2:       #0d0920;
  --surface:    #100c1f;
  --surface-2:  #16122a;
  --surface-3:  #1e1838;
  --card:       #13101f;
  --card-hover: #1a1630;

  /* ── Borders ── */
  --border:     rgba(255,255,255,.07);
  --border-2:   rgba(255,255,255,.12);
  --border-3:   rgba(138,100,255,.25);

  /* ── Text ── */
  --text:       #f0eeff;
  --text-2:     rgba(240,238,255,.65);
  --text-3:     rgba(240,238,255,.35);
  --text-4:     rgba(240,238,255,.2);

  /* ── Gradients ── */
  --grad:         linear-gradient(135deg, var(--violet), var(--pink));
  --grad-subtle:  linear-gradient(135deg, rgba(138,100,255,.15), rgba(236,72,153,.08));
  --grad-card:    linear-gradient(145deg, var(--surface-2), var(--surface));

  /* ── Sidebar ── */
  --sidebar-width:      240px;
  --sidebar-collapsed:  64px;

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

  /* ── Border radius ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-2xl: 28px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.6);
  --shadow-glow: 0 0 24px rgba(138,100,255,.25);

  /* ── Typography ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Transitions ── */
  --transition:      all .2s cubic-bezier(.4,0,.2,1);
  --transition-slow: all .35s cubic-bezier(.4,0,.2,1);

  /* ── Mobile breakpoints ── */
  --mobile-header-h: 56px;
  --bottom-nav-h:    64px;
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:         #f5f4f8;
  --bg-2:       #eeedf5;
  --surface:    #ffffff;
  --surface-2:  #f0eff8;
  --surface-3:  #e8e6f5;
  --card:       #ffffff;
  --card-hover: #f5f4fb;

  --border:     rgba(0,0,0,.09);
  --border-2:   rgba(0,0,0,.14);
  --border-3:   rgba(138,100,255,.3);

  --text:       #1a1630;
  --text-2:     rgba(26,22,48,.68);
  --text-3:     rgba(26,22,48,.42);
  --text-4:     rgba(26,22,48,.22);

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --shadow-glow: 0 0 24px rgba(138,100,255,.18);
}

/* ── Light theme component adjustments ── */
[data-theme="light"] .sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border-2);
  box-shadow: 2px 0 12px rgba(0,0,0,.06);
}
[data-theme="light"] .mobile-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border-2);
}
[data-theme="light"] .mobile-nav-drawer {
  background: var(--surface);
}
[data-theme="light"] .main-content {
  background: var(--bg);
}
[data-theme="light"] .card {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .nav-item.active {
  background: rgba(138,100,255,.1);
}
[data-theme="light"] .bottom-nav-web {
  background: var(--surface);
  border-top: 1px solid var(--border-2);
}

/* ── Light theme: fix hardcoded white-alpha backgrounds ── */
[data-theme="light"] .table-wrap tr:hover td,
[data-theme="light"] .table-wrap tbody tr:hover { background: rgba(0,0,0,.025); }
[data-theme="light"] .modal-body,
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,.4); }
[data-theme="light"] .dash-hero__brain-track { background: rgba(0,0,0,.1); }
[data-theme="light"] .admin-tab:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .perm-pill.type-sub { border-color: rgba(0,0,0,.1); }
[data-theme="light"] .perm-check-label.perm-sub { border-color: rgba(0,0,0,.1); }
[data-theme="light"] .rest-live-divider { background: rgba(0,0,0,.1); }
[data-theme="light"] .search-bar { background: var(--surface-2); border-color: var(--border-2); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
  background: var(--surface); color: var(--text); border-color: var(--border-2);
}
[data-theme="light"] .tab { color: var(--text-2); background: rgba(0,0,0,.04); }
[data-theme="light"] .tab.active { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
[data-theme="light"] .tab:hover:not(.active) { background: rgba(0,0,0,.06); color: var(--text); }
[data-theme="light"] .hotel-tab { color: var(--text-2); background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .hotel-tab:hover { background: rgba(0,0,0,.07); color: var(--text); border-color: rgba(0,0,0,.18); }
[data-theme="light"] .hotel-tab.active { background: rgba(138,100,255,.12); border-color: var(--violet); color: var(--violet-dim); }
[data-theme="light"] .badge-muted { background: rgba(0,0,0,.07); color: var(--text-2); }

/* ── Light theme: button contrast ── */
[data-theme="light"] .btn-ghost { color: var(--text-2); background: rgba(0,0,0,.04); border: 0.5px solid rgba(0,0,0,.1); }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,.08); color: var(--text); }
[data-theme="light"] .btn-outline-sm,
[data-theme="light"] .btn[class*="btn-outline"] { color: var(--text-2); border-color: rgba(0,0,0,.15); }

/* ── Light theme: modal improvements ── */
[data-theme="light"] .modal-overlay { background: rgba(15,10,40,.55); }
[data-theme="light"] .modal-box {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
}
[data-theme="light"] .modal-header {
  background: #ffffff;
  border-bottom-color: rgba(0,0,0,.08);
}
[data-theme="light"] .modal-footer {
  background: #f8f8fb;
  border-top-color: rgba(0,0,0,.08);
}
[data-theme="light"] .modal-body { background: #ffffff; }
[data-theme="light"] .modal-close:hover { background: rgba(0,0,0,.06); }
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background: #f8f8fb;
  border-color: rgba(0,0,0,.15);
  color: var(--text);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
  background: #ffffff;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(138,100,255,.12);
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder { color: rgba(26,22,48,.3); }
[data-theme="light"] .form-label { color: var(--text-2); }