/* ==========================================================================
   MedConduta — Design tokens
   Tema claro por padrão; suporte a prefers-color-scheme e alternância manual
   via atributo [data-theme] na tag <html>.
   Paleta e tipografia alinhadas ao material de estudo IGEDUC (simulados
   gerados nesta conta): fundo azulado, acento azul/roxo, destaque amarelo
   e cores categóricas (g1-g5) para dar identidade visual mais viva.
   ========================================================================== */

:root {
  /* Cor — neutros */
  --color-bg: #eef2f9;
  --color-bg-subtle: #e4eaf7;
  --color-surface: #ffffff;
  --color-surface-hover: #eef2fb;
  --color-border: #d5ddec;
  --color-border-strong: #bcc8e0;

  /* Cor — texto */
  --color-text: #13203a;
  --color-text-secondary: #56637d;
  --color-text-muted: #8491ac;
  --color-text-on-accent: #ffffff;

  /* Cor — acento (azul, cor g1 da paleta IGEDUC) */
  --color-accent: #2457d6;
  --color-accent-hover: #1c46b3;
  --color-accent-soft: #e3ebfc;
  --color-accent-soft-border: #c3d6f7;
  --gradient-accent: linear-gradient(135deg, #2457d6, #7a3fd0);
  --shadow-accent: 0 6px 16px rgba(36, 87, 214, 0.28);

  /* Cor — destaque de atenção (equivalente ao "mark" dos simulados) */
  --color-mark: #ffe066;
  --color-mark-fg: #3a2e00;

  /* Cor — categórica (g1-g5): identifica grupos/áreas sem usar o acento */
  --color-cat-1: #2457d6;
  --color-cat-1-soft: #e3ebfc;
  --color-cat-2: #7a3fd0;
  --color-cat-2-soft: #efe7fb;
  --color-cat-3: #0c8a8a;
  --color-cat-3-soft: #dcf3f3;
  --color-cat-4: #c25a00;
  --color-cat-4-soft: #fce8d9;
  --color-cat-5: #b8267a;
  --color-cat-5-soft: #fbe3ee;

  /* Cor — sinais clínicos (uso reservado: red flags, contraindicações) */
  --color-danger: #bf2a2a;
  --color-danger-soft: #fde3e3;
  --color-danger-border: #f3bcbc;
  --color-warning: #c25a00;
  --color-warning-soft: #fce8d9;
  --color-warning-border: #f0c99e;
  --color-success: #0f7b45;
  --color-success-soft: #dcf5e6;

  /* Tipografia */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-xxl: 2.125rem;

  --lh-tight: 1.25;
  --lh-normal: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Forma */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Sombra */
  --shadow-sm: 0 1px 2px rgba(19, 32, 58, 0.08);
  --shadow-md: 0 4px 12px rgba(19, 32, 58, 0.1);
  --shadow-lg: 0 12px 32px rgba(19, 32, 58, 0.14);

  /* Layout */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 60px;
  --bottomnav-height: 64px;
  --content-max-width: 880px;

  /* Transições */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  color-scheme: light;
}

/* Tema escuro automático (respeita o sistema) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0c1220;
    --color-bg-subtle: #0f1729;
    --color-surface: #151e33;
    --color-surface-hover: #1b2740;
    --color-border: #27324f;
    --color-border-strong: #34415f;

    --color-text: #e8eefc;
    --color-text-secondary: #9aa8c7;
    --color-text-muted: #7b88a8;

    --color-accent: #7ea2ff;
    --color-accent-hover: #9ab6ff;
    --color-accent-soft: #1b2a4d;
    --color-accent-soft-border: #2d3f66;
    --gradient-accent: linear-gradient(135deg, #7ea2ff, #b99aff);
    --shadow-accent: 0 6px 18px rgba(126, 162, 255, 0.25);

    --color-mark: #ffd43b;
    --color-mark-fg: #241c00;

    --color-cat-1: #7ea2ff;
    --color-cat-1-soft: #1b2a4d;
    --color-cat-2: #b99aff;
    --color-cat-2-soft: #2a2050;
    --color-cat-3: #4fd6d6;
    --color-cat-3-soft: #103535;
    --color-cat-4: #ffa24d;
    --color-cat-4-soft: #3a2412;
    --color-cat-5: #ff7ac0;
    --color-cat-5-soft: #3d1830;

    --color-danger: #ff8a8a;
    --color-danger-soft: #42191c;
    --color-danger-border: #5c2a2e;
    --color-warning: #ffa24d;
    --color-warning-soft: #3a2412;
    --color-warning-border: #5c3d1f;
    --color-success: #5fe0a0;
    --color-success-soft: #12382a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

/* Alternância manual — força tema independentemente do sistema */
:root[data-theme="dark"] {
  --color-bg: #0c1220;
  --color-bg-subtle: #0f1729;
  --color-surface: #151e33;
  --color-surface-hover: #1b2740;
  --color-border: #27324f;
  --color-border-strong: #34415f;

  --color-text: #e8eefc;
  --color-text-secondary: #9aa8c7;
  --color-text-muted: #7b88a8;

  --color-accent: #7ea2ff;
  --color-accent-hover: #9ab6ff;
  --color-accent-soft: #1b2a4d;
  --color-accent-soft-border: #2d3f66;
  --gradient-accent: linear-gradient(135deg, #7ea2ff, #b99aff);
  --shadow-accent: 0 6px 18px rgba(126, 162, 255, 0.25);

  --color-mark: #ffd43b;
  --color-mark-fg: #241c00;

  --color-cat-1: #7ea2ff;
  --color-cat-1-soft: #1b2a4d;
  --color-cat-2: #b99aff;
  --color-cat-2-soft: #2a2050;
  --color-cat-3: #4fd6d6;
  --color-cat-3-soft: #103535;
  --color-cat-4: #ffa24d;
  --color-cat-4-soft: #3a2412;
  --color-cat-5: #ff7ac0;
  --color-cat-5-soft: #3d1830;

  --color-danger: #ff8a8a;
  --color-danger-soft: #42191c;
  --color-danger-border: #5c2a2e;
  --color-warning: #ffa24d;
  --color-warning-soft: #3a2412;
  --color-warning-border: #5c3d1f;
  --color-success: #5fe0a0;
  --color-success-soft: #12382a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Telas largas de computador: a coluna de 880px deixava metade da tela vazia. */
@media (min-width: 1400px) {
  :root { --content-max-width: 1120px; }
}