/* ============================================================================
   study-app — DESIGN SYSTEM · tokens + base + reset
   Reproduz a estética do protótipo (Inter / indigo / slate, cards arredondados,
   sombras suaves) SEM Tailwind e SEM CDN — 100% offline. Suporta tema claro
   (padrão, = mockup) e escuro (bom para dirigir à noite).
   Editar AQUI é mudar o contrato visual de todas as telas.
   ============================================================================ */

:root {
  /* ---- paleta base (slate + indigo, idêntica ao mockup Tailwind) ---- */
  --indigo-50:  #eef2ff;  --indigo-100: #e0e7ff;  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;  --indigo-400: #818cf8;  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;  --indigo-700: #4338ca;

  --slate-50:  #f8fafc;  --slate-100: #f1f5f9;  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;  --slate-400: #94a3b8;  --slate-500: #64748b;
  --slate-600: #475569;  --slate-700: #334155;  --slate-800: #1e293b;
  --slate-900: #0f172a;  --slate-950: #020617;

  --emerald-50: #ecfdf5; --emerald-500: #10b981; --emerald-600: #059669;
  --red-50: #fef2f2;     --red-500: #ef4444;     --red-600: #dc2626;
  --amber-50: #fffbeb;   --amber-500: #f59e0b;   --amber-600: #d97706;
  --sky-50: #f0f9ff;     --sky-500: #0ea5e9;     --sky-600: #0284c7;
  --violet-500: #8b5cf6;

  /* ---- tokens semânticos (TEMA CLARO — padrão) ---- */
  --bg:            var(--slate-100);   /* fundo da app */
  --bg-elev:       #ffffff;            /* cards / superfícies elevadas */
  --bg-sunk:       var(--slate-50);    /* áreas recuadas (info boxes) */
  --surface-2:     var(--slate-100);
  --line:          var(--slate-200);   /* bordas */
  --line-soft:     var(--slate-100);

  --fg:            var(--slate-900);   /* texto principal */
  --fg-soft:       var(--slate-600);
  --muted:         var(--slate-500);   /* texto secundário */
  --faint:         var(--slate-400);   /* texto terciário / placeholders */

  --primary:       var(--indigo-600);
  --primary-strong:var(--indigo-700);
  --primary-soft:  var(--indigo-50);
  --primary-ring:  rgba(99, 102, 241, .35);
  --on-primary:    #ffffff;
  --accent:        var(--indigo-500);

  --ok:    var(--emerald-600);   --ok-bg:    var(--emerald-50);
  --bad:   var(--red-600);       --bad-bg:   var(--red-50);
  --warn:  var(--amber-600);     --warn-bg:  var(--amber-50);
  --info:  var(--sky-600);       --info-bg:  var(--sky-50);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg: 0 8px 30px -8px rgba(79, 70, 229, .18);
  --shadow-xl: 0 20px 50px -12px rgba(15, 23, 42, .25);

  /* ---- raios (Tailwind rounded-*) ---- */
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px;
  --r-full: 9999px;

  /* ---- espaçamento ---- */
  --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;

  /* ---- tipografia (imita Inter; cai pra system-ui offline) ---- */
  --font: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 10px; --text-xs: 11px; --text-sm: 13px; --text-base: 15px;
  --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px;

  /* ---- layout ---- */
  --sidebar-w: 232px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --content-max: 1100px;

  --tap: 44px;                 /* alvo mínimo de toque */
  --transition: .18s cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

/* ============================ TEMA ESCURO ============================ */
:root[data-theme="dark"] {
  --bg:        var(--slate-950);
  --bg-elev:   #0f1729;
  --bg-sunk:   #0b1322;
  --surface-2: #131c30;
  --line:      #243450;
  --line-soft: #1a2740;

  --fg:        #e8eefc;
  --fg-soft:   #c2cce0;
  --muted:     #94a3b8;
  --faint:     #64748b;

  --primary:       var(--indigo-500);
  --primary-strong:var(--indigo-400);
  --primary-soft:  rgba(99, 102, 241, .14);
  --on-primary:    #07112a;
  --accent:        var(--indigo-400);

  --ok:   #34d399; --ok-bg:  rgba(16, 185, 129, .12);
  --bad:  #f87171; --bad-bg: rgba(239, 68, 68, .12);
  --warn: #fbbf24; --warn-bg: rgba(245, 158, 11, .12);
  --info: #38bdf8; --info-bg: rgba(14, 165, 233, .12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 30px -8px rgba(0, 0, 0, .5);
  --shadow-xl: 0 20px 50px -12px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* segue o SO quando o usuário não escolheu manualmente */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: var(--slate-950); --bg-elev: #0f1729; --bg-sunk: #0b1322; --surface-2: #131c30;
    --line: #243450; --line-soft: #1a2740;
    --fg: #e8eefc; --fg-soft: #c2cce0; --muted: #94a3b8; --faint: #64748b;
    --primary: var(--indigo-500); --primary-strong: var(--indigo-400);
    --primary-soft: rgba(99,102,241,.14); --on-primary: #07112a; --accent: var(--indigo-400);
    --ok: #34d399; --ok-bg: rgba(16,185,129,.12); --bad: #f87171; --bad-bg: rgba(239,68,68,.12);
    --warn: #fbbf24; --warn-bg: rgba(245,158,11,.12); --info: #38bdf8; --info-bg: rgba(14,165,233,.12);
    color-scheme: dark;
  }
}

/* ================================ RESET ================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--primary-soft); color: var(--fg); }

/* tipografia tabular para números (stats) */
.tnum { font-variant-numeric: tabular-nums; }

/* scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-full); }
*::-webkit-scrollbar-track { background: transparent; }

/* utilidades mínimas (evita reinventar a cada tela) */
.u-row { display: flex; align-items: center; }
.u-col { display: flex; flex-direction: column; }
.u-gap-1 { gap: var(--sp-1); } .u-gap-2 { gap: var(--sp-2); } .u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }
.u-wrap { flex-wrap: wrap; }
.u-grow { flex: 1; }
.u-center { align-items: center; justify-content: center; }
.u-between { justify-content: space-between; }
.u-mla { margin-left: auto; }
.u-hidden { display: none !important; }
.u-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-mono { font-family: var(--mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}