/* ==========================================================================
   base.css - design tokens, reset, typography, theme (light / dark)
   ========================================================================== */

:root {
  /* brand */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  /* semantic */
  --ok-50:#ecfdf5;   --ok-100:#d1fae5;   --ok-500:#10b981;  --ok-600:#059669;   --ok-700:#047857;
  --warn-50:#fffbeb; --warn-100:#fef3c7; --warn-500:#f59e0b;--warn-600:#d97706; --warn-700:#b45309;
  --err-50:#fef2f2;  --err-100:#fee2e2;  --err-500:#ef4444; --err-600:#dc2626;  --err-700:#b91c1c;
  --info-50:#eff6ff; --info-100:#dbeafe; --info-500:#3b82f6;--info-600:#2563eb; --info-700:#1d4ed8;

  /* neutral (light theme) */
  --bg:            #f4f6fb;
  --bg-elev:       #ffffff;
  --bg-elev-2:     #fafbff;
  --bg-sunken:     #eef1f7;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --text:          #0f172a;
  --text-muted:    #64748b;
  --text-faint:    #94a3b8;

  --sidebar-bg:    #0f172a;
  --sidebar-text:  #cbd5e1;
  --sidebar-muted: #64748b;
  --sidebar-active-bg: rgba(99,102,241,.18);
  --sidebar-active-text: #ffffff;

  /* effects */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 4px 12px rgba(15,23,42,.10);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.16);
  --shadow-xl: 0 24px 60px rgba(15,23,42,.24);

  /* metrics */
  --r-xs: 4px;  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  --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;

  --sidebar-w: 264px;
  --topbar-h: 62px;
  --bottomnav-h: 60px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.4,0,.2,1);
}

html[data-theme="dark"] {
  --bg:            #0b1120;
  --bg-elev:       #111a2e;
  --bg-elev-2:     #0e1626;
  --bg-sunken:     #0a1120;
  --border:        #1e293b;
  --border-strong: #334155;
  --text:          #e2e8f0;
  --text-muted:    #94a3b8;
  --text-faint:    #64748b;

  --sidebar-bg:    #080d1a;
  --sidebar-text:  #cbd5e1;
  --sidebar-muted: #64748b;

  --ok-50:#06281f;   --ok-100:#0b3d2e;
  --warn-50:#2c2107; --warn-100:#453208;
  --err-50:#2c1214;  --err-100:#45161a;
  --info-50:#0c1e36; --info-100:#122c4d;
  --brand-50:#141a3a; --brand-100:#1e2654;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.6);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.7);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
html[data-theme="dark"] a { color: var(--brand-300); }
table { border-collapse: collapse; width: 100%; }
h1,h2,h3,h4,h5,h6 { line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: .98rem; }
ul, ol { padding-left: 1.2rem; }

[hidden] { display: none !important; }

/* ---------- accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--brand-600); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ---------- typography helpers ---------- */
.muted   { color: var(--text-muted); }
.faint   { color: var(--text-faint); }
.small   { font-size: .82rem; }
.xsmall  { font-size: .74rem; }
.strong  { font-weight: 650; }
.mono    { font-family: var(--font-mono); font-size: .86em; }
.nowrap  { white-space: nowrap; }
.truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center  { text-align: center; }
.right   { text-align: right; }
.upper   { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.text-ok   { color: var(--ok-600); }
.text-warn { color: var(--warn-600); }
.text-err  { color: var(--err-600); }
.text-info { color: var(--info-600); }
html[data-theme="dark"] .text-ok   { color: var(--ok-500); }
html[data-theme="dark"] .text-warn { color: var(--warn-500); }
html[data-theme="dark"] .text-err  { color: var(--err-500); }
html[data-theme="dark"] .text-info { color: var(--info-500); }

/* ---------- utility spacing / layout ---------- */
.row    { display: flex; align-items: center; gap: var(--sp-3); }
.row-b  { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-t  { display: flex; align-items: flex-start; gap: var(--sp-3); }
.row-w  { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.col    { display: flex; flex-direction: column; gap: var(--sp-3); }
.grow   { flex: 1 1 auto; min-width: 0; }
.mt-0{margin-top:0}      .mt-1{margin-top:var(--sp-1)}  .mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)}
.mb-0{margin-bottom:0}   .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.ml-auto{margin-left:auto}
.w-full{width:100%}

/* ---------- scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* ---------- boot screen ---------- */
.boot-screen {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
  color: #fff; text-align: center;
  transition: opacity .35s var(--ease);
}
.boot-screen.fade-out { opacity: 0; pointer-events: none; }
.boot-logo { font-size: 54px; line-height: 1; animation: bootPop .6s var(--ease); }
.boot-title { font-size: 1.15rem; font-weight: 650; margin: var(--sp-3) 0 var(--sp-5); letter-spacing: .02em; }
.boot-spinner {
  width: 30px; height: 30px; margin: 0 auto;
  border: 3px solid rgba(255,255,255,.22); border-top-color: #fff; border-radius: 50%;
  animation: spin .8s linear infinite;
}
.boot-msg { margin-top: var(--sp-4); font-size: .84rem; color: rgba(255,255,255,.66); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bootPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- state helpers ---------- */
body.modal-open { overflow: hidden; }
body.on-auth .app-shell,
body.on-auth .bottom-nav,
body.on-auth .app-footer { display: none !important; }

mark {
  background: var(--brand-soft, rgba(79, 70, 229, .18));
  color: inherit;
  padding: 0 .12em;
  border-radius: 3px;
  font-weight: 650;
}

/* ---------- reduced motion ---------- */@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}