/* ==========================================================================
   PRISMA · tokens.css
   Linguagem visual do ecossistema Conecta Plural / ÁGORA
   --------------------------------------------------------------------------
   TRÊS CAMADAS. A ordem importa e não é decorativa.

     1. PRIMITIVOS  --p-*    valores crus. Uma escala, nenhum significado.
                             Componente NUNCA consome primitivo direto.
     2. SEMÂNTICOS  --*      o contrato. "surface-glass", "accent-primary".
                             É só isto que componente pode ler.
     3. TEMAS       [data-tema]  amarram semântico a valor.

   Por que três e não uma: o ecossistema tem superfícies que NÃO podem mudar
   de cor agora (n.conectaplural.com.br está no ar; HispanoQuest foi auditado
   em contraste peça por peça). Com o contrato semântico no meio, o mesmo
   componente serve as duas sem reescrita e sem quebrar o que já está fora.

   Trocar a identidade inteira = trocar um bloco de tema. Nunca um componente.
   ========================================================================== */

/* ==========================================================================
   1. PRIMITIVOS — a matéria-prima
   ========================================================================== */
:root {

  /* --- Azuis: cobalto -> elétrico ----------------------------------------
     A cor de energia do sistema. A escala vai do fundo institucional (950)
     ao brilho de IA trabalhando (300). */
  --p-azul-950: #172554;
  --p-azul-900: #1E3A8A;
  --p-azul-800: #1E40AF;
  --p-azul-700: #1D4ED8;
  --p-azul-600: #2563EB;   /* azul estrutural */
  --p-azul-500: #3B82F6;   /* azul principal aprovado */
  --p-azul-400: #60A5FA;
  --p-azul-300: #93C5FD;   /* texto/ícone sobre escuro */
  --p-azul-200: #BFDBFE;
  --p-azul-100: #DBEAFE;

  /* --- Ciano: fluxo, conexão e luz --------------------------------------- */
  --p-ciano-900: #083344;
  --p-ciano-700: #0E7490;
  --p-ciano-600: #0891B2;
  --p-ciano-500: #06B6D4;
  --p-ciano-400: #22D3EE;
  --p-ciano-300: #67E8F9;
  --p-ciano-200: #A5F3FC;

  /* --- Verde: vitalidade e inteligência viva ----------------------------- */
  --p-verde-900: #052E24;
  --p-verde-800: #064E3B;
  --p-verde-700: #047857;
  --p-verde-600: #059669;
  --p-verde-500: #10B981;
  --p-verde-400: #22C55E;
  --p-verde-300: #34D399;
  --p-verde-200: #86EFAC;

  /* --- Laranja: acento quente, sempre minoritário ------------------------ */
  --p-laranja-900: #431407;
  --p-laranja-800: #7C2D12;
  --p-laranja-700: #C2410C;
  --p-laranja-600: #EA580C;
  --p-laranja-500: #F97316;
  --p-laranja-400: #FB923C;
  --p-laranja-300: #FDBA74;
  --p-laranja-200: #FED7AA;

  /* --- Neutros frios: dark slate -> branco ------------------------------- */
  --p-cinza-1000: #070B12;
  --p-cinza-975: #0B1220;
  --p-cinza-950: #0F172A;
  --p-cinza-900: #111827;
  --p-cinza-850: #162033;
  --p-cinza-800: #1B263A;
  --p-cinza-750: #223047;
  --p-cinza-700: #2B3446;
  --p-cinza-600: #3A4559;
  --p-cinza-500: #4E5869;
  --p-cinza-400: #7A8699;
  --p-cinza-300: #A9B4C6;
  --p-cinza-200: #CBD3DF;
  --p-cinza-100: #E4E9F0;
  --p-cinza-50:  #EEF2F8;
  --p-branco:    #FFFFFF;

  /* --- Semânticas de feedback -------------------------------------------
     Valores medidos contra o canvas escuro #090C13 (ver docs/CONTRASTE.md).
     Nenhum estado do sistema depende SÓ de cor: cada um tem ícone e texto. */
  --p-ambar-500:    #F59E0B;
  --p-ambar-800:    #402F0C;
  --p-vermelho-500: #FF7A72;
  --p-vermelho-800: #42171A;

  /* --- Escala de espaço --------------------------------------------------
     Onze degraus. Não existe décimo segundo. Se um layout "precisa" de 18px,
     o layout está errado, não a escala. */
  --p-espaco-1:  4px;   --p-espaco-2:  8px;   --p-espaco-3:  12px;
  --p-espaco-4:  16px;  --p-espaco-5:  20px;  --p-espaco-6:  24px;
  --p-espaco-7:  32px;  --p-espaco-8:  40px;  --p-espaco-9:  48px;
  --p-espaco-10: 64px;  --p-espaco-11: 80px;

  /* --- Raios -------------------------------------------------------------
     Os refs de 19/09/2026 mostram raio grande e curvatura contínua: a peça
     de vidro é um seixo, não um retângulo arredondado. Daí o salto 20 -> 28. */
  --p-raio-xs:   6px;
  --p-raio-sm:   10px;
  --p-raio-md:   14px;
  --p-raio-lg:   20px;
  --p-raio-xl:   28px;
  --p-raio-2xl:  36px;
  --p-raio-full: 999px;
}

/* ==========================================================================
   2 + 3. CONTRATO SEMÂNTICO, amarrado pelo TEMA
   --------------------------------------------------------------------------
   O tema padrão do ecossistema é o escuro. Ele vale sem atributo nenhum:
   produto que não declara tema nasce PRISMA Dark.
   ========================================================================== */
:root,
[data-tema="prisma-dark"] {
  color-scheme: dark;

  /* --- Fundo -------------------------------------------------------------
     Três profundidades. O canvas não é #000: preto puro mata a percepção de
     camada - o vidro precisa ter de onde emergir. */
  --background-deep:    var(--p-cinza-1000);
  --background-canvas:  var(--p-cinza-975);
  --background-subtle:  var(--p-cinza-950);

  /* --- Superfícies sólidas (leitura longa, formulário, tabela, texto) ----- */
  --surface-1:          var(--p-cinza-900);
  --surface-2:          var(--p-cinza-850);
  --surface-3:          var(--p-cinza-800);
  --surface-elevated:   var(--p-cinza-750);
  --surface-selected:   rgba(59, 123, 255, 0.14);

  /* --- Véu de superfície -------------------------------------------------
     Superfície do sistema NÃO é cor chapada. Chapado lê como retângulo
     desenhado; um degradê levíssimo lê como PLACA — tem lado que recebe luz
     e lado que não. É a diferença entre caixa de template e material.
     Alfa baixo de propósito: se der para "ver o degradê", está forte demais. */
  --surface-veu:
    linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%);

  /* Painel de destaque: a placa que inverte a relação com o fundo e puxa a
     atenção (composer, hero de seção, cartão de foco). Não é card comum. */
  --surface-destaque:
    linear-gradient(158deg, #1B2437 0%, #141B2A 52%, #101724 100%);

  /* Campo da página: o degradê de fundo sobre o qual tudo assenta e sem o
     qual o vidro não tem o que refratar. */
  --campo-atmosfera:
    radial-gradient(62rem 42rem at 80% -10%, rgba(59, 130, 246, 0.20), transparent 60%),
    radial-gradient(50rem 36rem at 4% 102%, rgba(34, 197, 94, 0.12), transparent 60%),
    radial-gradient(34rem 28rem at 92% 86%, rgba(249, 115, 22, 0.10), transparent 58%),
    linear-gradient(175deg, var(--p-cinza-950), var(--p-cinza-975) 62%, var(--p-cinza-1000));

  /* --- Vidro -------------------------------------------------------------
     NÃO é "transparente + blur". No tema escuro aprovado, o corpo recebe uma
     tinta slate translúcida: o ambiente continua atravessando, mas a peça
     preserva profundidade e leitura. Ver foundations/glass.css.
     TRÊS TRANSPARÊNCIAS, e não uma com variações soltas. Cada uma tem um
     trabalho, e a diferença entre elas é blur E tinta juntos — mexer só no
     blur não muda o que a peça comunica.

       CLEAR   14px / tinta baixa  - a cor atravessa. Para chip, controle
                                     pequeno, peça que não pode competir.
       LIQUID  24px / tinta média  - a assinatura do sistema. Tem aresta
                                     óptica: reflexo na borda, profundidade.
       FROSTED 36px / tinta alta   - difusão para momentos de FOCO: modal,
                                     command palette, quando há texto por cima
                                     e o fundo é imprevisível. */
  --glass-tint-clear:   rgba(15, 23, 42, 0.38);
  --glass-tint-liquid:  rgba(15, 23, 42, 0.58);
  --glass-tint-frosted: rgba(15, 23, 42, 0.76);
  --glass-blur-clear:   14px;
  --glass-blur-liquid:  24px;
  --glass-blur-frosted: 36px;
  --glass-saturacao:    155%;

  /* Compatibilidade com quem já lia estes nomes. */
  --surface-glass:        var(--glass-tint-liquid);
  --surface-glass-strong: var(--glass-tint-frosted);
  --glass-blur:           var(--glass-blur-liquid);
  --glass-blur-strong:    var(--glass-blur-frosted);

  /* --- Texto -------------------------------------------------------------
     Medidos sobre --background-canvas. Nenhum desce abaixo de 4,5:1,
     exceto disabled, que a WCAG dispensa e que precisa parecer desligado. */
  --text-primary:   var(--p-cinza-50);    /* 17,4:1 */
  --text-secondary: var(--p-cinza-300);   /*  9,3:1 */
  --text-muted:     var(--p-cinza-400);   /*  5,3:1 */
  --text-disabled:  var(--p-cinza-500);   /*  2,7:1 - desligado de propósito */
  --text-inverse:   var(--p-cinza-975);
  --text-on-accent: var(--p-branco);      /* sobre accent-primary: 5,3:1 */

  /* --- Bordas ------------------------------------------------------------
     No escuro a borda é luz, não tinta: rgba branco, não um cinza fixo.
     Assim ela funciona sobre vidro, sobre sólido e sobre foto. */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-glass:   rgba(255, 255, 255, 0.22);  /* o fio de luz da aresta */
  --border-focus:   var(--p-azul-300);

  /* --- Marca e acentos ---------------------------------------------------
     #3B82F6 é o azul visual da marca; botão primário usa o degrau 600 para
     preservar contraste com texto branco. Ciano e verde ampliam a identidade;
     laranja é acento quente minoritário, nunca cor dominante. */
  --brand-blue:     var(--p-azul-500);
  --brand-cyan:     var(--p-ciano-500);
  --brand-green:    var(--p-verde-400);
  --brand-orange:   var(--p-laranja-500);
  --accent-primary: var(--p-azul-600);
  --accent-hover:   var(--p-azul-700);
  --accent-active:  var(--p-azul-800);
  --accent-muted:   rgba(59, 130, 246, 0.16);
  --accent-text:    var(--p-azul-300);
  --accent-cyan:    var(--p-ciano-400);
  --accent-green:   var(--p-verde-400);
  --accent-warm:    var(--p-laranja-500);
  --accent-cyan-muted:  rgba(34, 211, 238, 0.12);
  --accent-green-muted: rgba(34, 197, 94, 0.12);
  --accent-warm-muted:  rgba(249, 115, 22, 0.12);

  /* --- Feedback ---------------------------------------------------------- */
  --success: var(--p-verde-300);     --success-surface: var(--p-verde-800);
  --warning: var(--p-ambar-500);     --warning-surface: var(--p-ambar-800);
  --danger:  var(--p-vermelho-500);  --danger-surface:  var(--p-vermelho-800);
  --info:    var(--p-azul-300);      --info-surface:    rgba(59, 123, 255, 0.14);

  /* --- Glow --------------------------------------------------------------
     Glow SIGNIFICA. Não enfeita. Quatro papéis, e só quatro:
       subtle     - peça importante em repouso
       active     - item selecionado / em execução
       focus      - foco de teclado (este nunca é opcional)
       processing - agente ou IA trabalhando agora */
  --glow-subtle:     0 0 0 1px rgba(59,130,246,.10), 0 8px 32px rgba(6,182,212,.08);
  --glow-active:     0 0 0 1px rgba(59,130,246,.32), 0 8px 36px rgba(34,211,238,.18);
  --glow-focus:      0 0 0 2px var(--background-canvas), 0 0 0 4px var(--p-azul-300);
  --glow-processing: 0 0 0 1px rgba(34,211,238,.28), 0 0 30px rgba(34,197,94,.18);

  /* --- Elevação ----------------------------------------------------------
     Profundidade não é só sombra. Cada nível combina sombra + superfície +
     borda; no escuro a sombra sozinha é quase invisível. */
  --elev-flat:     none;
  --elev-raised:   0 1px 2px rgba(0,0,0,.40);
  --elev-floating: 0 8px 24px rgba(0,0,0,.45);
  --elev-overlay:  0 16px 48px rgba(0,0,0,.55);
  --elev-modal:    0 32px 80px rgba(0,0,0,.65);
}

/* --------------------------------------------------------------------------
   TEMA CLARO - PRISMA Light
   Mesmo material, luz invertida. Os refs claros (vidro sobre gradiente pastel)
   provam que a linguagem não depende do escuro; depende do fio de luz e de o
   fundo ter textura. No claro a aresta vira luz branca sobre cor, não sobre
   preto - por isso --border-glass sobe para 0.85.
   -------------------------------------------------------------------------- */
[data-tema="prisma-light"] {
  color-scheme: light;

  --background-deep:   #E8ECF3;
  --background-canvas: #F3F6FA;
  --background-subtle: #FFFFFF;

  --surface-1:        #FFFFFF;
  --surface-2:        #F7F9FC;
  --surface-3:        #EFF3F8;
  --surface-elevated: #FFFFFF;
  --surface-selected: rgba(47, 98, 224, 0.10);

  /* No claro o véu não pode ser branco sobre branco — não aparece. Aqui a luz
     vem de cima e a placa esfria para baixo, puxando um azul pálido. */
  --surface-veu:
    linear-gradient(158deg, rgba(255,255,255,.9) 0%, rgba(223,231,244,.55) 100%);

  --surface-destaque:
    linear-gradient(158deg, #253046 0%, #1B2537 55%, #151D2C 100%);

  --campo-atmosfera:
    radial-gradient(58rem 40rem at 80% -10%, rgba(47, 98, 224, 0.13), transparent 60%),
    radial-gradient(46rem 34rem at 2% 102%, rgba(127, 176, 255, 0.16), transparent 58%),
    linear-gradient(175deg, #FAFCFF 0%, #E9EEF7 100%);

  /* No claro a tinta é mais alta: o vidro precisa clarear o que passa por
     baixo, senão o texto escuro por cima disputa com o fundo. */
  --glass-tint-clear:   rgba(255, 255, 255, 0.42);
  --glass-tint-liquid:  rgba(255, 255, 255, 0.58);
  --glass-tint-frosted: rgba(255, 255, 255, 0.78);
  --surface-glass:        var(--glass-tint-liquid);
  --surface-glass-strong: var(--glass-tint-frosted);

  --text-primary:   #0D1424;
  --text-secondary: #3D4759;
  --text-muted:     #5C677A;
  --text-disabled:  #98A1B0;
  --text-inverse:   #FFFFFF;
  --text-on-accent: #FFFFFF;

  --border-subtle:  rgba(13, 20, 36, 0.07);
  --border-default: rgba(13, 20, 36, 0.12);
  --border-strong:  rgba(13, 20, 36, 0.22);
  --border-glass:   rgba(255, 255, 255, 0.85);
  --border-focus:   var(--p-azul-600);

  --brand-blue:     var(--p-azul-500);
  --brand-cyan:     var(--p-ciano-500);
  --brand-green:    var(--p-verde-400);
  --brand-orange:   var(--p-laranja-500);
  --accent-primary: var(--p-azul-600);
  --accent-hover:   var(--p-azul-700);
  --accent-active:  var(--p-azul-800);
  --accent-muted:   rgba(37, 99, 235, 0.12);
  --accent-text:    #1E4FC4;
  --accent-cyan:    var(--p-ciano-700);
  --accent-green:   var(--p-verde-700);
  --accent-warm:    var(--p-laranja-700);
  --accent-cyan-muted:  rgba(6, 182, 212, 0.10);
  --accent-green-muted: rgba(34, 197, 94, 0.10);
  --accent-warm-muted:  rgba(249, 115, 22, 0.10);

  --success: #127A52;  --success-surface: #E4F4EC;
  --warning: #8A6206;  --warning-surface: #FCF1DA;
  --danger:  #B4322B;  --danger-surface:  #FBE9E7;
  --info:    #1E4FC4;  --info-surface:    #E6EDFC;

  --glow-subtle:     0 0 0 1px rgba(47,98,224,.10), 0 4px 20px rgba(47,98,224,.10);
  --glow-active:     0 0 0 1px rgba(47,98,224,.28), 0 6px 26px rgba(47,98,224,.18);
  --glow-focus:      0 0 0 2px var(--background-canvas), 0 0 0 4px var(--p-azul-600);
  --glow-processing: 0 0 0 1px rgba(47,98,224,.26), 0 0 24px rgba(47,98,224,.22);

  --elev-raised:   0 1px 2px rgba(13,20,36,.08);
  --elev-floating: 0 8px 24px rgba(13,20,36,.10);
  --elev-overlay:  0 16px 48px rgba(13,20,36,.14);
  --elev-modal:    0 32px 80px rgba(13,20,36,.20);
}

/* --------------------------------------------------------------------------
   TEMA DE COMPATIBILIDADE - Ñ Conecta
   Por que existe: n.conectaplural.com.br está no ar com esta paleta e os
   materiais de 2ª e 3ª série a consomem. Ela é FUNCIONAL, não é o destino.
   Enquanto a migração não acontece com evidência, este tema mantém o que está
   publicado funcionando com os MESMOS componentes do sistema novo.
   Não usar em produto novo. Fonte: identidade-n-conecta/site/css/tokens.css
   -------------------------------------------------------------------------- */
[data-tema="n-conecta-legado"] {
  color-scheme: light;

  --background-deep:   #E8EAEE;
  --background-canvas: #F3F4F6;
  --background-subtle: #FBF4E8;

  --surface-1: #FFFFFF;  --surface-2: #FBF4E8;  --surface-3: #F3F4F6;
  --surface-elevated: #FFFFFF;
  --surface-selected: #E7F1F0;

  /* O véu aqui puxa a areia da identidade, não o azul. */
  --surface-veu:
    linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(251,244,232,.72) 100%);

  --surface-destaque:
    linear-gradient(158deg, #08294C 0%, #001B3D 60%, #001430 100%);

  --campo-atmosfera:
    radial-gradient(54rem 38rem at 82% -8%, rgba(15, 118, 110, 0.10), transparent 60%),
    radial-gradient(44rem 32rem at 0% 102%, rgba(242, 177, 52, 0.10), transparent 58%),
    linear-gradient(175deg, #FBF4E8 0%, #F3F4F6 100%);

  --surface-glass:        rgba(255, 255, 255, 0.62);
  --surface-glass-strong: rgba(255, 255, 255, 0.82);

  --text-primary: #001B3D;  --text-secondary: #46586B;  --text-muted: #64748B;
  --text-disabled: #9AA6B4; --text-inverse: #FFFFFF;    --text-on-accent: #FFFFFF;

  --border-subtle: rgba(0,27,61,.07);  --border-default: #E2E6EB;
  --border-strong: rgba(0,27,61,.24);  --border-glass: rgba(255,255,255,.85);
  --border-focus: #0F766E;

  --brand-blue: #001B3D;  --brand-cyan: #0F766E;
  --brand-green: #12705A; --brand-orange: #F2B134;
  --accent-primary: #0F766E;  --accent-hover: #0B5A54;  --accent-active: #084640;
  --accent-muted: #E7F1F0;    --accent-text: #0B5A54;
  --accent-cyan: #0F766E;     --accent-green: #12705A;   --accent-warm: #8A6206;
  --accent-cyan-muted: #E7F1F0; --accent-green-muted: #E4F1ED; --accent-warm-muted: #FDF3DF;

  --success: #12705A;  --success-surface: #E4F1ED;
  --warning: #8A6206;  --warning-surface: #FDF3DF;
  --danger:  #C0362B;  --danger-surface:  #FDECEA;
  --info:    #0F766E;  --info-surface:    #E7F1F0;

  --glow-subtle:     none;
  --glow-active:     0 0 0 1px rgba(15,118,110,.30);
  --glow-focus:      0 0 0 2px #FFFFFF, 0 0 0 4px #0F766E;
  --glow-processing: 0 0 0 1px rgba(15,118,110,.30);

  --elev-raised:   0 1px 2px rgba(0,27,61,.06), 0 2px 8px rgba(0,27,61,.05);
  --elev-floating: 0 4px 12px rgba(0,27,61,.08), 0 12px 32px rgba(0,27,61,.07);
  --elev-overlay:  0 16px 40px rgba(0,27,61,.12);
  --elev-modal:    0 28px 64px rgba(0,27,61,.18);
}

/* ==========================================================================
   TOKENS QUE NÃO MUDAM COM O TEMA
   Forma, ritmo e tempo são da linguagem, não da paleta.
   ========================================================================== */
:root {
  /* --- Espaçamento semântico --------------------------------------------- */
  --espaco-1: var(--p-espaco-1);   --espaco-2: var(--p-espaco-2);
  --espaco-3: var(--p-espaco-3);   --espaco-4: var(--p-espaco-4);
  --espaco-5: var(--p-espaco-5);   --espaco-6: var(--p-espaco-6);
  --espaco-7: var(--p-espaco-7);   --espaco-8: var(--p-espaco-8);
  --espaco-9: var(--p-espaco-9);   --espaco-10: var(--p-espaco-10);
  --espaco-11: var(--p-espaco-11);

  /* --- Raios -------------------------------------------------------------- */
  --radius-xs: var(--p-raio-xs);   --radius-sm: var(--p-raio-sm);
  --radius-md: var(--p-raio-md);   --radius-lg: var(--p-raio-lg);
  --radius-xl: var(--p-raio-xl);   --radius-2xl: var(--p-raio-2xl);
  --radius-full: var(--p-raio-full);

  /* --- Texto sobre painel de destaque -------------------------------------
     O painel de destaque (--surface-destaque) é escuro em TODOS os temas, então
     o texto sobre ele não pode vir de --text-primary (que muda com o tema).
     Único lugar onde uma cor de texto é fixa; e por isso ela é token, e não
     hexadecimal solto no componente. */
  --surface-destaque-base: var(--p-azul-950);  /* cor sólida sob o gradiente do destaque */
  --border-focus-sobre-imagem: var(--p-branco); /* anel de foco sobre vidro/foto: branco + halo escuro */
  --text-on-destaque:   #EEF2F8;
  --text-on-destaque-2: rgba(238, 242, 248, 0.70);
  --text-on-destaque-3: rgba(238, 242, 248, 0.55);
  --border-on-destaque: rgba(255, 255, 255, 0.10);
  --glass-on-destaque:       rgba(255, 255, 255, 0.10);  /* controle de vidro DENTRO do destaque */
  --glass-on-destaque-hover: rgba(255, 255, 255, 0.16);

  /* --- Medidas de leitura -------------------------------------------------- */
  --medida-texto: 68ch;     /* limite de linha para leitura longa */
  --largura-app:  1440px;
  --largura-doc:  860px;

  /* --- Alvo de toque ------------------------------------------------------
     44px é o mínimo. Não existe controle essencial menor que isto no celular. */
  --alvo-toque: 44px;

  /* --- Ícones ------------------------------------------------------------- */
  --icone-sm: 16px;  --icone-md: 20px;  --icone-lg: 24px;  --icone-xl: 32px;
  --icone-traco: 1.65;   /* ref Orbit: traco fino le como refinado na grade de 20px */

  /* --- Movimento ----------------------------------------------------------
     Interface fica abaixo de 300ms. Gaveta é a única exceção, porque percorre
     a tela inteira.

     AS CURVAS NÃO SÃO INVENTADAS. `cubic-bezier(.4,0,.2,1)` — que estava aqui
     antes — é o valor que todo mundo digita de memória e é fraco demais: a
     peça parece deslizar em vez de assentar. Estes são os valores da
     disciplina de movimento adotada (skill `animate`).

     E NÃO EXISTE ease-in NA INTERFACE. Começar devagar atrasa exatamente o
     instante em que a pessoa está olhando. Saída também é ease-out — por isso
     --easing-exit deixou de ser uma curva própria. */
  --motion-fast:    160ms;   /* pressão de botão, hover */
  --motion-default: 200ms;   /* menu, popover, seleção */
  --motion-slow:    280ms;   /* modal, entrada de lista */
  --motion-gaveta:  460ms;   /* drawer: atravessa a tela */

  --easing-standard:  cubic-bezier(0.23, 1, 0.32, 1);    /* ease-out forte */
  --easing-enter:     cubic-bezier(0.23, 1, 0.32, 1);
  --easing-exit:      cubic-bezier(0.23, 1, 0.32, 1);    /* sai como entrou */
  --easing-movimento: cubic-bezier(0.77, 0, 0.175, 1);   /* move-se NA tela */
  --easing-gaveta:    cubic-bezier(0.32, 0.72, 0, 1);
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion - obrigatório, não cortesia.
   Zera a duração em vez de remover a transição: o estado final continua
   correto, e nada "pula" porque a transição sumiu no meio.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms; --motion-default: 1ms; --motion-slow: 1ms;
  }
}

/* Registro expressivo: dark slate + azul/ciano/verde + acento laranja.
   Direção aprovada em 19/09/2026; sem rosa, violeta ou magenta. */
:root {
  --optico-texto: #F8FAFC;
  --optico-solido: #111827;
  /* 20/09/2026 (D-021): o campo óptico passa a usar a família de cores aprovada na Home — céu azul, lâminas azul-ardósia,
     um fio quente na aresta. Antes: faixas azul→ciano→VERDE→laranja saturadas, que tingiam o vidro como cartão colorido. */
  --optico-campo:
    radial-gradient(44% 46% at 100% 62%, rgba(249,115,22,.16), transparent 72%),
    linear-gradient(204deg, #6FA3EE 0%, #3B82F6 34%, #2563EB 66%, #1E3A8A 100%);   /* começo menos pálido: texto branco pequeno mora no alto */
  --optico-faixa: linear-gradient(100deg, rgba(23,37,84,.92) 0%, rgba(30,58,138,.88) 46%, rgba(37,99,235,.78) 100%);
  --optico-faixa-secundaria: linear-gradient(100deg, rgba(17,24,39,.90) 0%, rgba(23,37,84,.90) 50%, rgba(30,64,175,.82) 100%);
  --optico-halo: inset 0 1px 0 rgba(219,234,254,.55), 0 -1px 0 rgba(249,115,22,.42), 0 -10px 28px -6px rgba(249,115,22,.22);
  --optico-vidro: linear-gradient(140deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  --optico-borda: rgba(255,255,255,.14);
  --optico-aresta: rgba(255,255,255,.30);
  --optico-reflexo: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,0) 42%, rgba(34,211,238,.10));
  --optico-elevacao: 0 26px 64px -24px rgba(0,0,0,.62), 0 0 40px rgba(6,182,212,.08);
  --optico-controle: rgba(15,23,42,.52);
}


/* --------------------------------------------------------------------------
   PAPEL E TINTA (19/09/2026 · D-014, mescla da Home do PRISMA)
   O material em miniatura (.folhinha) é papel claro em QUALQUER tema: por isso
   estes dois não entram nos blocos de tema. Hoje apontam para valores que já
   existiam; o nome próprio é para o componente dizer o que quer, não de onde vem.
   -------------------------------------------------------------------------- */
:root {
  --papel: var(--text-on-destaque);
  --tinta: var(--optico-solido);
}

/* --------------------------------------------------------------------------
   CORES EM USO — promovidas da Home do PRISMA para o sistema  (20/09/2026 · D-021)
   A autora aprovou na tela "os tons de azul" da Home; até aqui essas cores viviam como contas soltas dentro de
   componentes. Agora têm NOME. Tudo derivado dos tokens de marca: trocar a paleta troca estas também.
   O seletor repete os temas de propósito: var() dentro de token é resolvido no elemento onde o token é declarado —
   assim a FOLHA (que usa data-tema="prisma-light" num painel) sai clara mesmo dentro de página escura.
   -------------------------------------------------------------------------- */
:root, [data-tema="prisma-dark"], [data-tema="prisma-light"], [data-tema="n-conecta-legado"] {
  /* céu da cena — abertura, acompanhar, fecho */
  --cena-ceu:
    radial-gradient(38% 46% at 100% 58%, color-mix(in srgb, var(--brand-orange) 20%, transparent), transparent 72%),
    linear-gradient(204deg,
    color-mix(in srgb, var(--text-on-destaque) 90%, var(--brand-cyan)) 0%,
    color-mix(in srgb, var(--text-on-destaque) 52%, var(--brand-blue)) 22%,
    color-mix(in srgb, var(--brand-cyan) 26%, var(--brand-blue)) 46%,
    var(--brand-blue) 70%,
    var(--accent-primary) 100%);
  --cena-ceu-fundo:
    linear-gradient(200deg,
    color-mix(in srgb, var(--text-on-destaque) 34%, var(--brand-blue)) 0%,
    color-mix(in srgb, var(--accent-primary) 80%, var(--optico-solido)) 34%,
    color-mix(in srgb, var(--accent-active) 60%, var(--optico-solido)) 100%);
  --cena-ceu-calmo:
    linear-gradient(180deg,
    color-mix(in srgb, var(--accent-active) 70%, var(--optico-solido)) 0%,
    var(--accent-primary) 52%,
    color-mix(in srgb, var(--text-on-destaque) 40%, var(--brand-blue)) 100%);

  /* folha — o painel claro: azul-claríssimo, nunca branco seco */
  --folha-fundo: linear-gradient(168deg,
    color-mix(in srgb, var(--brand-blue) 7%, var(--background-subtle)) 0%,
    color-mix(in srgb, var(--brand-blue) 17%, var(--background-subtle)) 100%);

  /* estados de um material — cor cheia da faixa do cartão; escurecidas até o branco ler a ≥ 4,5:1 (medido) */
  --estado-continuar:  color-mix(in srgb, var(--accent-primary) 79%, var(--tinta));
  --estado-ajustar:    color-mix(in srgb, var(--brand-cyan) 50%, var(--tinta));
  --estado-decidir:    color-mix(in srgb, var(--brand-orange) 56%, var(--tinta));
  --estado-finalizado: color-mix(in srgb, var(--brand-green) 45%, var(--tinta));
  --text-on-estado:    var(--text-on-accent);
}

/* ==========================================================================
   D-026 · PRISMA · Quiet Luxury Technology Editorial · premium pass 20/09/2026
   --------------------------------------------------------------------------
   Mantém azul/ciano/verde/laranja. O refinamento está no slate, na matéria,
   na quantidade de luz e na disciplina de uso dos acentos.
   ========================================================================== */
[data-tema="prisma-dark"]{
  --background-deep:#080A0E;
  --background-canvas:#0D1117;
  --background-subtle:#121821;

  --surface-1:#151B24;
  --surface-2:#1A212C;
  --surface-3:#212A37;
  --surface-elevated:#2A3442;
  --surface-selected:rgba(79,143,247,.12);
  --surface-veu:linear-gradient(158deg,rgba(255,255,255,.038),rgba(255,255,255,0) 46%);
  --surface-destaque:linear-gradient(158deg,#1B2532 0%,#141C27 52%,#10161F 100%);

  --campo-atmosfera:
    radial-gradient(58rem 38rem at 82% -10%,rgba(79,143,247,.13),transparent 62%),
    radial-gradient(40rem 30rem at 2% 100%,rgba(72,207,227,.055),transparent 64%),
    radial-gradient(30rem 24rem at 94% 88%,rgba(79,196,147,.035),transparent 62%),
    linear-gradient(175deg,#121821,#0D1117 62%,#080A0E);

  --glass-tint-clear:rgba(13,17,23,.34);
  --glass-tint-liquid:rgba(13,17,23,.56);
  --glass-tint-frosted:rgba(13,17,23,.78);
  --glass-saturacao:128%;

  --text-primary:#EDF1F5;
  --text-secondary:#BBC4CE;
  --text-muted:#818C9A;
  --text-disabled:#586371;

  --border-subtle:rgba(237,241,245,.05);
  --border-default:rgba(237,241,245,.085);
  --border-strong:rgba(127,176,255,.16);
  --border-glass:rgba(237,241,245,.17);
  --border-focus:#7FB0FF;

  --brand-blue:#4F8FF7;
  --brand-cyan:#48CFE3;
  --brand-green:#4FC493;
  --brand-orange:#E69352;
  --accent-primary:#397BE0;
  --accent-hover:#2F69C5;
  --accent-active:#2859A4;
  --accent-muted:rgba(79,143,247,.13);
  --accent-text:#82B2FF;
  --accent-cyan:#64D8E7;
  --accent-green:#6BCDA5;
  --accent-warm:#EAA064;
  --accent-cyan-muted:rgba(72,207,227,.085);
  --accent-green-muted:rgba(79,196,147,.075);
  --accent-warm-muted:rgba(230,147,82,.07);

  --glow-subtle:0 0 0 1px rgba(79,143,247,.06),0 12px 34px rgba(0,0,0,.10);
  --glow-active:0 0 0 1px rgba(127,176,255,.19),0 14px 42px rgba(79,143,247,.10);
  --glow-focus:0 0 0 2px var(--background-canvas),0 0 0 4px #7FB0FF;
  --glow-processing:0 0 0 1px rgba(72,207,227,.18),0 0 26px rgba(79,196,147,.09);

  --elev-raised:0 1px 2px rgba(0,0,0,.30);
  --elev-floating:0 20px 54px -18px rgba(0,0,0,.52);
  --elev-overlay:0 28px 72px rgba(0,0,0,.48);
  --elev-modal:0 42px 100px rgba(0,0,0,.60);
}

[data-tema="prisma-light"]{
  --background-deep:#E8EBEF;
  --background-canvas:#F2F4F7;
  --background-subtle:#FBFCFD;
  --surface-1:#FBFCFD;
  --surface-2:#F6F8FA;
  --surface-3:#ECEFF3;
  --surface-elevated:#FFFFFF;
  --surface-selected:rgba(57,123,224,.085);
  --surface-veu:linear-gradient(158deg,rgba(255,255,255,.90),rgba(226,231,238,.45));
  --campo-atmosfera:
    radial-gradient(48rem 32rem at 86% -8%,rgba(79,143,247,.09),transparent 64%),
    radial-gradient(36rem 26rem at 2% 100%,rgba(72,207,227,.035),transparent 66%),
    linear-gradient(175deg,#FAFBFC,#EEF1F5);
  --border-subtle:rgba(14,24,36,.055);
  --border-default:rgba(14,24,36,.095);
  --border-strong:rgba(41,83,142,.18);
  --accent-primary:#397BE0;
  --accent-hover:#2F69C5;
  --accent-active:#2859A4;
  --accent-muted:rgba(57,123,224,.095);
  --accent-text:#245CB5;
  --accent-cyan:#187E8E;
  --accent-green:#287D61;
  --accent-warm:#A85A25;
  --glow-subtle:0 0 0 1px rgba(57,123,224,.055),0 14px 38px rgba(32,48,66,.045);
}