/* tokens.css — design tokens definitivos.
 *
 * Direção visual escolhida via Visual Companion (24/abr/2026):
 *   Híbrido: shell dark+mono (vibe ferramenta profissional) + Inter pro conteúdo (legibilidade longa).
 *
 * Dark-first, com tema claro completo (ver bloco "tema claro" abaixo). Paleta
 * própria — todo consumidor de cor deve passar por um token daqui, nunca um
 * hex solto (ver src/styles/layout.css, Critical 1 do review final). Display
 * font é Space Grotesk (--font-display); Inter é a font de conteúdo
 * (--font-content).
 */

:root {
  /* ------------ superficies ------------ */
  --bg:           #101018;
  --bg-elev:      #15151F;
  --bg-muted:     #1A1A26;
  --bg-overlay:   #22222E;

  /* ------------ texto ------------ */
  --fg:           #C6C6D6;
  --fg-strong:    #F7F7FF;
  --fg-muted:     #8E8EA8;
  --fg-faint:     #6E6E88;

  /* ------------ bordes ------------ */
  --border:        #262634;
  --border-strong: #2E2E40;

  /* ------------ acento ------------ */
  --accent:        #7C6BFF;
  --accent-fg:     #FFFFFF;
  --accent-soft:   #9A8BFF;

  /* ------------ materias (tono sobre tono) ------------ */
  --m-fisio:       #8B7BFF;
  --m-bq:          #3F5BD9;

  /* ------------ semantic (estados) ------------ */
  --success:       #3fb950;    /* correct quiz, completion */
  --success-soft:  rgba(63, 185, 80, 0.12);
  --warn:          #f0883e;    /* key-concept, atenção */
  --warn-soft:     rgba(240, 136, 62, 0.12);
  --danger:        #ec7474;    /* clinic-note, error */
  --danger-soft:   rgba(236, 116, 116, 0.10);

  /* ------------ classes pedagógicas (accent por tipo) ------------ */
  --c-key-concept: #f0883e;    /* laranja — definição central */
  --c-clinic-note: #ec7474;    /* vermelho — clínica */
  --c-memory-aid:  #56d364;    /* verde — mnemônico */
  --c-example:     #d2a8ff;    /* lilás — exemplo concreto */
  --c-analogy:     #79c0ff;    /* azul claro — analogia */
  --c-integration: #f1c232;    /* amarelo dourado — transversal */

  /* ------------ typography ------------ */
  --font-content: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  /* ------------ type scale ------------ */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;

  --line-tight: 1.25;
  --line-base:  1.55;
  --line-loose: 1.75;

  /* ------------ spacing (4px scale) ------------ */
  --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: 56px;

  /* ------------ radii ------------ */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ------------ shadows (dark-tuned) ------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* ------------ shell sizing ------------ */
  --shell-fs:   13px;
  --header-h:   55px;       /* altura real do .app-header sticky (≥701px) — usado em sticky
                               offsets do carril e do scrim. ≤700px o padding do .app-nav
                               encolhe e a altura real cai a 47px: ver override em
                               mobile.css dentro do mesmo @media (max-width: 700px). */
  --content-fs: 15px;
  --sidebar-w:  212px;      /* largura do .app-sidebar em desktop (layout.css). Antes só
                               existia como fallback de var(--sidebar-w, 212px) — nunca
                               declarado (Minor 3 do review final). */

  /* ------------ breakpoint do cajão móvil (Task 7) ------------
   * 900px é o único valor real — não um design token compartilhável, porque
   * CSS media features não aceitam var() em navegador sem build step (este
   * projeto não tem um). As três ocorrências têm que ficar sincronizadas à
   * mão:
   *   - src/app.js:100        matchMedia('(max-width: 900px)')  → MOBILE()
   *   - src/components/sidebar.css  @media (max-width: 900px)   → CSS do cajão
   *   - src/components/sidebar.css  @media not all and (max-width: 900px)
   *     → oculta o botão hamburguesa (negação exata da query de cima: sem
   *     "min-width: 901px", não hay franja fraccionaria (900–901px, zoom/
   *     pantallas escaladas) donde el cajón está apagado y el botón sigue
   *     visible mas muerto).
   */

  /* ------------ misc ------------ */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── tema claro ──────────────────────────────────────────────────────────
 * Se define dos veces a propósito: una para quien no eligió y tiene el
 * sistema en claro, otra para la elección explícita. Así el toggle gana en
 * ambos sentidos. Ningún token puede vivir sólo aquí: todos tienen su
 * definición base en :root.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:           #FBFAFD;
    --bg-elev:      #FFFFFF;
    --bg-muted:     #F2F1F7;
    --bg-overlay:   #E9E8F0;
    --fg:           #3A3A48;
    --fg-strong:    #16161F;
    --fg-muted:     #63637A;
    --fg-faint:     #6F6F86;
    --border:       #E2E1EC;
    --border-strong:#CBCADA;
    --accent:       #5B49E8;
    --accent-soft:  #7C6BFF;
    --m-fisio:      #6B57E0;
    --m-bq:         #2F49C4;
    /* Semánticos: mismo criterio de contraste que los pedagógicos de abajo.
       Sin esto quedaban con el valor de fondo oscuro sobre blanco. */
    --success:      #1F7A34;
    --success-soft: rgba(31, 122, 52, 0.12);
    --warn:         #B45309;
    --warn-soft:    rgba(180, 83, 9, 0.12);
    --danger:       #BE3A3A;
    --danger-soft:  rgba(190, 58, 58, 0.10);
    --c-key-concept:#B45309;
    --c-clinic-note:#BE3A3A;
    --c-memory-aid: #1F7A34;
    --c-example:    #7A3FBF;
    --c-analogy:    #1F5FA8;
    --c-integration:#9A6B00;
    --shadow-sm: 0 1px 2px rgba(22, 22, 31, 0.06);
    --shadow-md: 0 4px 12px rgba(22, 22, 31, 0.09);
    --shadow-lg: 0 12px 32px rgba(22, 22, 31, 0.12);
  }
}

:root[data-theme="light"] {
  --bg:           #FBFAFD;
  --bg-elev:      #FFFFFF;
  --bg-muted:     #F2F1F7;
  --bg-overlay:   #E9E8F0;
  --fg:           #3A3A48;
  --fg-strong:    #16161F;
  --fg-muted:     #63637A;
  --fg-faint:     #6F6F86;
  --border:       #E2E1EC;
  --border-strong:#CBCADA;
  --accent:       #5B49E8;
  --accent-soft:  #7C6BFF;
  --m-fisio:      #6B57E0;
  --m-bq:         #2F49C4;
  /* Semánticos: mismo criterio de contraste que los pedagógicos de abajo.
     Sin esto quedaban con el valor de fondo oscuro sobre blanco. */
  --success:      #1F7A34;
  --success-soft: rgba(31, 122, 52, 0.12);
  --warn:         #B45309;
  --warn-soft:    rgba(180, 83, 9, 0.12);
  --danger:       #BE3A3A;
  --danger-soft:  rgba(190, 58, 58, 0.10);
  --c-key-concept:#B45309;
  --c-clinic-note:#BE3A3A;
  --c-memory-aid: #1F7A34;
  --c-example:    #7A3FBF;
  --c-analogy:    #1F5FA8;
  --c-integration:#9A6B00;
  --shadow-sm: 0 1px 2px rgba(22, 22, 31, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 22, 31, 0.09);
  --shadow-lg: 0 12px 32px rgba(22, 22, 31, 0.12);
}