/* ============================================================================
   Estudo Legal — tokens da marca (marca.css)
   ----------------------------------------------------------------------------
   Fonte única de cores, tipografia, raios, sombras, espaçamentos e movimento.
   Todo o app importa este arquivo e usa SÓ estas variáveis (nada de cor
   "solta" nas folhas de estilo das telas).

   Conceito: "tinta e marca-texto". Azul-índigo profundo (seriedade, tinta de
   caneta, capa de código) + amarelo de marca-texto (o gesto de estudar o
   artigo). Mesma família visual da Sulco Gestão e da BellaSync: botões em
   pílula, cabeçalho translúcido, sobrelinhas em caixa alta espaçada, títulos
   grandes com tracking negativo, numeração em mono ("01 /").

   Fontes hospedadas no próprio servidor (/static/fonts/fontes.css, licença OFL):
     Fraunces (títulos, 400–700, com itálico; use "opsz" 72 nos títulos), IBM Plex Sans (texto, 400–700),
     IBM Plex Mono (citações de artigos, números, 400–500).

   Tema: claro por padrão; escuro automático via prefers-color-scheme.
   Para forçar um tema: <html data-tema="claro"> ou <html data-tema="escuro">.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- CORES */
  /* Fundos */
  --cor-fundo: #F6F7FB;            /* fundo da página (papel levemente frio) */
  --cor-fundo-alt: #FFFFFF;        /* fundo de seções alternadas */
  --cor-superficie: #FFFFFF;       /* cards, painéis, modais, campos */
  --cor-superficie-2: #EEF0F7;     /* superfície rebaixada: barra lateral, trilhos, abas */
  --cor-fundo-nav: rgba(246, 247, 251, .78); /* cabeçalho translúcido (com backdrop-filter) */

  /* Texto */
  --cor-texto: #141B3D;            /* texto principal e títulos (tinta) */
  --cor-texto-suave: #4F5675;      /* texto secundário, parágrafos de apoio (AA sobre fundo e superfície) */
  --cor-texto-fraco: #757C99;      /* legendas grandes, ícones, placeholders — evitar em texto corrido pequeno */

  /* Bordas */
  --cor-borda: #E2E5EF;            /* divisórias e contorno padrão de cards */
  --cor-borda-forte: #C9CEE0;      /* contorno de campos e botões fantasma */

  /* Primária — azul-índigo "tinta" (ações, links, marca) */
  --cor-primaria: #25339A;         /* botão principal, links, foco */
  --cor-primaria-forte: #1A2470;   /* hover/pressionado da primária */
  --cor-primaria-suave: #E7E9FB;   /* fundo de chips, seleção, destaque leve */
  --cor-sobre-primaria: #FFFFFF;   /* texto/ícone sobre a primária */

  /* Secundária — verde-jade (apoio: progresso, revisão em dia, gráficos) */
  --cor-secundaria: #0E7666;
  --cor-secundaria-suave: #DCF1EC;
  --cor-sobre-secundaria: #FFFFFF;

  /* Destaque — amarelo marca-texto (grifos, selos, fita do logo). Nunca como cor de texto sobre claro. */
  --cor-destaque: #FFC83D;
  --cor-destaque-suave: #FFF0C2;   /* grifo de fundo em trechos de lei */
  --cor-sobre-destaque: #141B3D;   /* texto sobre o amarelo */

  /* Estados */
  --cor-sucesso: #127552;          /* acerto, salvo, concluído */
  --cor-sucesso-suave: #DDF3E8;
  --cor-erro: #C0392B;             /* erro, resposta errada, exclusão */
  --cor-erro-suave: #FBE3E0;
  --cor-aviso: #9A5B00;            /* atenção (tom legível como texto) */
  --cor-aviso-suave: #FFF1D6;
  --cor-info: var(--cor-primaria);
  --cor-info-suave: var(--cor-primaria-suave);

  /* Seções escuras fixas (faixas "noite" usadas nos dois temas) */
  --cor-noite: #0E1230;
  --cor-noite-2: #161B42;
  --cor-noite-texto: #E9EBF7;
  --cor-noite-suave: #A9AFD0;
  --cor-noite-borda: rgba(255, 255, 255, .10);
  --cor-primaria-clara: #9AA6FF;   /* índigo claro: texto/ícone de marca sobre fundos escuros */

  --cor-foco: #25339A;             /* anel de foco (:focus-visible) */
  --cor-selecao: #FFE58A;          /* ::selection */

  /* ----------------------------------------------------------- TIPOGRAFIA */
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;  /* h1–h3, números grandes */
  --fonte-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* corpo, botões, UI */
  --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* "Art. 186", contadores, numeração */

  --tam-xs: 12px;                  /* legendas, selos */
  --tam-sm: 14px;                  /* UI compacta, rodapé */
  --tam-base: 16px;                /* texto padrão */
  --tam-md: 18px;                  /* lead de cards */
  --tam-lg: clamp(18px, 1.6vw, 21px);   /* lead de seções */
  --tam-h3: clamp(22px, 2.2vw, 28px);
  --tam-h2: clamp(34px, 5vw, 64px);
  --tam-h1: clamp(42px, 7.2vw, 96px);
  --altura-linha: 1.6;
  --altura-linha-titulo: 1.04;
  --tracking-titulo: -0.025em;     /* títulos sempre com tracking negativo */
  --tracking-sobrelinha: 0.16em;   /* sobrelinhas em caixa alta */

  /* ------------------------------------------------------------- FORMAS */
  --raio-sm: 8px;                  /* chips, campos pequenos */
  --raio: 12px;                    /* padrão: campos, cards pequenos */
  --raio-lg: 18px;                 /* cards, janelas de demonstração */
  --raio-xl: 28px;                 /* blocos grandes, CTA final */
  --raio-pilula: 999px;            /* botões, selos, abas */

  /* ------------------------------------------------------------- SOMBRAS */
  --sombra-1: 0 1px 2px rgba(20, 27, 61, .06);                        /* elevação mínima (itens ativos) */
  --sombra-2: 0 12px 32px -18px rgba(20, 27, 61, .28);                /* cards */
  --sombra-3: 0 40px 100px -40px rgba(20, 27, 61, .45);               /* janelas/mockups flutuantes, modais */
  --sombra-botao: 0 10px 26px -12px rgba(37, 51, 154, .55);           /* hover do botão primário */

  /* ------------------------------------------------------- ESPAÇAMENTOS */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --esp-secao: clamp(72px, 10vw, 136px);   /* respiro vertical entre seções */
  --largura-max: 1200px;                   /* largura máxima do conteúdo */
  --largura-texto: 68ch;                   /* medida confortável para leitura */
  --margem-lateral: clamp(16px, 4vw, 32px);/* gutter lateral */
  --altura-nav: 64px;                      /* altura do cabeçalho fixo */

  /* ------------------------------------------------------------ MOVIMENTO */
  --ease: cubic-bezier(.22, 1, .36, 1);        /* saída suave (padrão) */
  --ease-mola: cubic-bezier(.34, 1.56, .64, 1);/* "pop" de selos e chips */
  --duracao-rapida: .18s;
  --duracao: .35s;
  --duracao-lenta: .8s;

  color-scheme: light;
}

/* ---------------------------------------------------------- TEMA ESCURO */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo: #0B0F24;
    --cor-fundo-alt: #0F1430;
    --cor-superficie: #151B3A;
    --cor-superficie-2: #10152F;
    --cor-fundo-nav: rgba(11, 15, 36, .78);
    --cor-texto: #E9EBF7;
    --cor-texto-suave: #A9AFD0;
    --cor-texto-fraco: #7D84A8;
    --cor-borda: #252C52;
    --cor-borda-forte: #363F6E;
    --cor-primaria: #9AA6FF;
    --cor-primaria-forte: #BCC4FF;
    --cor-primaria-suave: #1F2654;
    --cor-sobre-primaria: #0B0F24;
    --cor-secundaria: #3CC9B0;
    --cor-secundaria-suave: #12352F;
    --cor-sobre-secundaria: #062520;
    --cor-destaque: #FFC83D;
    --cor-destaque-suave: #3A3216;
    --cor-sobre-destaque: #141B3D;
    --cor-sucesso: #3DD68C;
    --cor-sucesso-suave: #12301F;
    --cor-erro: #FF7A6E;
    --cor-erro-suave: #3A1A1A;
    --cor-aviso: #F2B544;
    --cor-aviso-suave: #352812;
    --cor-noite: #070A1B;
    --cor-noite-2: #10142F;
    --cor-foco: #BCC4FF;
    --cor-selecao: #5A4A12;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 16px 40px -20px rgba(0, 0, 0, .7);
    --sombra-3: 0 40px 110px -30px rgba(0, 0, 0, .85);
    --sombra-botao: 0 10px 28px -12px rgba(154, 166, 255, .45);
    color-scheme: dark;
  }
}

/* Tema escuro forçado (mesmos valores do bloco acima) */
:root[data-tema="escuro"] {
  --cor-fundo: #0B0F24;
  --cor-fundo-alt: #0F1430;
  --cor-superficie: #151B3A;
  --cor-superficie-2: #10152F;
  --cor-fundo-nav: rgba(11, 15, 36, .78);
  --cor-texto: #E9EBF7;
  --cor-texto-suave: #A9AFD0;
  --cor-texto-fraco: #7D84A8;
  --cor-borda: #252C52;
  --cor-borda-forte: #363F6E;
  --cor-primaria: #9AA6FF;
  --cor-primaria-forte: #BCC4FF;
  --cor-primaria-suave: #1F2654;
  --cor-sobre-primaria: #0B0F24;
  --cor-secundaria: #3CC9B0;
  --cor-secundaria-suave: #12352F;
  --cor-sobre-secundaria: #062520;
  --cor-destaque: #FFC83D;
  --cor-destaque-suave: #3A3216;
  --cor-sobre-destaque: #141B3D;
  --cor-sucesso: #3DD68C;
  --cor-sucesso-suave: #12301F;
  --cor-erro: #FF7A6E;
  --cor-erro-suave: #3A1A1A;
  --cor-aviso: #F2B544;
  --cor-aviso-suave: #352812;
  --cor-noite: #070A1B;
  --cor-noite-2: #10142F;
  --cor-foco: #BCC4FF;
  --cor-selecao: #5A4A12;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 16px 40px -20px rgba(0, 0, 0, .7);
  --sombra-3: 0 40px 110px -30px rgba(0, 0, 0, .85);
  --sombra-botao: 0 10px 28px -12px rgba(154, 166, 255, .45);
  color-scheme: dark;
}