/* Cópia do design system (first-ai-brand/design-system/tokens.css, Atlas Precision v4.2), sem o @import
   das fontes, que a demo carrega no <head>. Palco (escuro) em :root, Editorial (claro) em .light. */
/* ============================================================
   FIRST AI Design System · Token Foundation
   ATLAS PRECISION v4.2 (produto: Atlas, Linkfort, Mission Control)
   Palco (escuro) na paleta sóbria desde 06/10/2026 (RM-2026-0205).

   Fonte da verdade: especímen Atlas Precision
   ~/.gstack/projects/Maykee25-firs-ai/designs/design-system-20260718/
   atlas-precision-especime.html (v4.2 tem a seção "Aplicação · Linkfort")

   Dois modos: Editorial (claro, PADRÃO de produto) e Palco (escuro,
   apresentação/foco). `:root` carrega o Palco e `.light` o Editorial,
   o mesmo arranjo do app (ThemeProvider aplica .light por padrão).

   Princípios: hairline no lugar de borda · sombra neutra no lugar de
   brilho · cor chapada (o único degradê é o reflexo do vidro) · Sora
   300/400/500 (bold não existe em UI) · vidro só no chrome; sobre
   conteúdo, cada situação tem sua receita (ver bloco "vidro sobre
   conteúdo").

   Marca e sistema seguem esta mesma régua (out 2026). A marca FIRST
   (site, capa, proposta) usa o azul como fundo, em cor chapada:
   #0069BA e #0B5299, texto branco. No sistema, o azul é só acento.
   Brilho, halo, texto em degradê e emoji não existem em nenhum dos dois.
   ============================================================ */


:root {
  /* ══════════ PALCO (escuro · apresentação e foco) ══════════
     Paleta sóbria, aprovada em 06/10/2026 (RM-2026-0205). A anterior tinha
     cara de IA: fundo azul-marinho, fio azul, status em neon pastel. Esta é
     quase-preto neutro, fio cinza, um acento só e status menos saturados. */

  /* Fundos e superfícies */
  --ap-bg:          #0B0C0E;
  --ap-bg-deep:     #070809;
  --ap-surface:     #121316;
  --ap-surface-2:   #1A1B1F;
  --ap-surface-3:   #232429;

  /* Texto: hierarquia por tom; o peso (DM 600) só marca o destaque */
  --ap-text:        rgba(255,255,255,0.90);
  --ap-text-strong: #F4F5F7;
  --ap-text-soft:   rgba(255,255,255,0.70);
  --ap-text-faint:  rgba(255,255,255,0.50);
  --ap-text-ghost:  rgba(255,255,255,0.28);  /* decorativo, nunca informação */

  /* Marca: um acento só. No escuro o azul clareia por contraste, sem ficar elétrico */
  --ap-blue:        #5A9FE6;
  --ap-blue-ink:    #0069BA;   /* tinta de botão/avatar (chapada, sem gradiente) */
  --ap-accent:      #5A9FE6;

  /* Hairlines: a separação padrão do sistema. No escuro o fio é cinza, sem tingir a tela de azul */
  --ap-hairline:        rgba(255,255,255,0.07);
  --ap-hairline-strong: rgba(255,255,255,0.12);
  --ap-hairline-white:  rgba(255,255,255,0.06);
  --ap-campo-linha:     rgba(255,255,255,0.38);   /* contorno de controle: 3:1 no mínimo, a caixa não pode sumir */
  --ap-nav-active:      rgba(255,255,255,0.06);

  /* Status: só funcional, nunca branding. Menos saturados: informam sem brilhar */
  --ap-ok:   #3FB37F;   --ap-ok-bg:   rgba(63,179,127,0.10);
  --ap-warn: #D9A441;   --ap-warn-bg: rgba(217,164,65,0.10);
  --ap-crit: #E5565B;   --ap-crit-bg: rgba(229,86,91,0.10);
  --ap-info: #5A9FE6;

  /* Vidro do CHROME (sidebar/topbar/popover): pousa no palco vazio */
  --ap-glass-bg:     linear-gradient(155deg, rgba(255,255,255,0.012) 0%, rgba(255,255,255,0.004) 55%, rgba(255,255,255,0.010) 100%);
  --ap-glass-blur:   blur(22px) saturate(1.6) brightness(1.06);
  --ap-glass-border: rgba(255,255,255,0.10);
  --ap-glass-border-top: rgba(255,255,255,0.28); /* aresta de cima mais clara = corte do material */
  --ap-glass-inset:  inset 0 1px 0 rgba(255,255,255,0.22);

  /* Vidro sobre CONTEÚDO, regra: quanto mais fino o que passa por
     trás, MENOS blur; quanto mais denso o fundo, mais corpo no vidro.
     Duas leis: blur é pixel ABSOLUTO (escale a leitura, não o número)
     e copie o RESULTADO, não o ingrediente (fundo muda → congele a cor
     que o vidro produzia). */
  --ap-drawer-vidro:  rgba(58,60,66,0.42);               /* painel lateral */
  --ap-drawer-borda:  rgba(255,255,255,0.10);
  --ap-drawer-card:   rgba(255,255,255,0.10);            /* bloco flutuante interno */
  --ap-drawer-blur:   blur(30px) saturate(1.7) brightness(1.35);
  --ap-drawer-bloco-sombra: 0 8px 24px rgba(0,0,0,0.12);
  --ap-tooltip-vidro: rgba(22,23,27,0.55);               /* hover de gráfico: atrás tem linha de 2px */
  --ap-tooltip-blur:  blur(6px) saturate(1.4);
  --ap-tooltip-borda: rgba(255,255,255,0.14);
  --ap-notif-bg:      rgba(30,31,35,0.97);               /* toast: corpo sólido sob o brilho */
  --ap-notif-ghost-bg:   rgba(38,39,44,0.92);            /* pilha: trás MAIS sólido que a frente */
  --ap-notif-ghost-blur: blur(12px) saturate(1.4);
  --ap-navbar-vidro:  rgba(58,60,66,0.24);               /* pílula mobile: só ícones */
  --ap-modal-bg:   rgba(22,23,27,0.80);
  --ap-modal-blur: blur(14px) saturate(1.5);             /* vidro que se move não pode custar caro */
  --ap-modal-scrim: rgba(0,0,0,0.50);
  --ap-modal-scrim-blur: blur(10px);                     /* 3px da demo escalado pra tela cheia */
  --ap-scrim:         rgba(0,0,0,0.45);
  --ap-tip-bg: #26272C;  --ap-tip-fg: #FFFFFF;           /* pílula de tinta (sidebar colapsada) */

  /* Profundidade: sombra neutra, no lugar de brilho */
  --ap-depth:      0 12px 32px rgba(0,0,0,0.45);
  --ap-shadow-pop: 0 12px 36px rgba(0,0,0,0.55);

  /* Raios */
  --ap-r-chip: 6px; --ap-r-input: 10px; --ap-r-card: 16px;
  --ap-r-modal: 24px; --ap-r-pill: 999px;

  /* Motion: teto 400ms, nada linear, fases sobrepostas */
  --ap-ease:      cubic-bezier(0.32, 0.72, 0, 1);   /* painel, drawer, troca de modo */
  --ap-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* entrada padrão */
  --ap-ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ap-ease-micro: cubic-bezier(0.33, 1, 0.68, 1);  /* hover, chip, foco (ease-out-cubic) */
  --ap-t-micro: 120ms; --ap-t-std: 200ms; --ap-t-panel: 320ms; --ap-t-count: 400ms;

  /* Árvore que dobra: o galho é tinta SÓLIDA; tronco e curva se sobrepõem na
     junção, e a translúcida escurecia ali. Declarado uma vez: `.light` mora no
     mesmo <html>, então a mistura já sai com o azul e o papel do Editorial. */
  --ap-galho: color-mix(in srgb, var(--ap-blue) 22%, var(--ap-surface));

  /* Azulejo de ícone (canais e eventos), no desenho dos conectores do Claude: o
     MESMO fundo para todo ícone. No Palco, um degrau acima do painel e da linha
     ativa (--ap-surface-2), com fio claro, para o quadrado se destacar. */
  --ap-azulejo:       #26282E;
  --ap-azulejo-borda: rgba(255,255,255,0.10);

  /* Tour com clipe (o passo a passo de cada tela): o véu em volta do recorte e
     o fundo do quadro animado. Iguais nos dois modos: o véu precisa escurecer
     o papel do Editorial tanto quanto o Palco, e o quadro é uma tela de vídeo. */
  --ap-tour-veu:    rgba(8,12,30,0.55);
  --ap-tour-quadro: #05070D;
}

.light {
  /* ══════════ EDITORIAL (claro · PADRÃO de produto) ══════════ */

  --ap-bg:          #F5F8FC;   /* papel gelado */
  --ap-bg-deep:     #EDF2F9;
  --ap-surface:     #FFFFFF;
  --ap-surface-2:   #E9EFF7;
  --ap-surface-3:   #DCE7F5;

  /* Escada de tom: cada degrau ~1,6x o contraste do próximo (sobre o card
     branco: 19,7 / 12,4 / 8,0 / 5,5). */
  --ap-text:        #2A3352;
  --ap-text-strong: #060A1A;
  --ap-text-soft:   #43506E;
  --ap-text-faint:  #5C6A85;
  --ap-text-ghost:  rgba(6,10,26,0.30);

  --ap-blue:        #0069BA;
  --ap-blue-ink:    #0069BA;
  --ap-accent:      #0A5FA3;

  --ap-hairline:        rgba(6,10,26,0.07);
  --ap-hairline-strong: rgba(0,105,186,0.22);
  --ap-hairline-white:  rgba(6,10,26,0.06);
  --ap-campo-linha:     rgba(6,10,26,0.18);   /* fio de campo de formulário */
  --ap-nav-active:      rgba(0,105,186,0.09);

  --ap-ok:   #0A7A4B;   --ap-ok-bg:   rgba(10,122,75,0.08);
  --ap-warn: #B26A00;   --ap-warn-bg: rgba(178,106,0,0.08);
  --ap-crit: #D93A4C;   --ap-crit-bg: rgba(217,58,76,0.08);
  --ap-info: #0069BA;

  --ap-glass-bg:     linear-gradient(155deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.66) 100%);
  --ap-glass-blur:   blur(22px) saturate(1.4) brightness(1.02);
  --ap-glass-border: rgba(6,10,26,0.08);
  --ap-glass-border-top: rgba(255,255,255,0.95);
  --ap-glass-inset:  inset 0 1px 0 rgba(255,255,255,0.9);

  --ap-drawer-vidro:  rgba(236,241,248,0.60);
  --ap-drawer-borda:  rgba(255,255,255,0.85);
  --ap-drawer-card:   rgba(255,255,255,0.94);
  --ap-drawer-blur:   blur(30px) saturate(1.7);  /* sem brightness: lavaria o papel */
  --ap-drawer-bloco-sombra: 0 8px 24px rgba(10,30,64,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
  --ap-tooltip-vidro: rgba(255,255,255,0.58);
  --ap-tooltip-blur:  blur(6px) saturate(1.3);
  --ap-tooltip-borda: rgba(6,10,26,0.10);
  --ap-notif-bg:      rgba(255,255,255,0.92);
  --ap-notif-ghost-bg:   rgba(255,255,255,0.94);
  --ap-notif-ghost-blur: blur(12px) saturate(1.4);
  --ap-navbar-vidro:  rgba(236,241,248,0.34);
  --ap-modal-bg:   linear-gradient(155deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.86) 100%);
  --ap-modal-blur: blur(14px) saturate(1.3);
  --ap-modal-scrim: rgba(6,10,26,0.18);
  --ap-modal-scrim-blur: blur(10px);
  --ap-scrim:         rgba(6,10,26,0.18);
  --ap-tip-bg: #10182E;  --ap-tip-fg: #FFFFFF;

  --ap-depth:      0 10px 30px rgba(0,105,186,0.06);
  --ap-shadow-pop: 0 24px 60px rgba(10,30,64,0.30), 0 6px 20px rgba(10,30,64,0.14);

  /* Azulejo de ícone no Editorial: papel branco com fio. */
  --ap-azulejo:       #FFFFFF;
  --ap-azulejo-borda: rgba(10,30,64,0.14);
}

/* ============================================================
   EFEITOS DO PALCO: cor chapada no lugar de degradê e brilho.
   Só no escuro, por isso o :not(.light). Componente usa com o valor
   antigo de fallback, que é o que o Editorial continua vendo:
   background: var(--ap-banner-fundo, <degradê antigo>).
   - banner: faixa azul de destaque, cor sólida e sem sombra azul
   - cta: botão de ação principal, tinta chapada e sem brilho
   ============================================================ */
:root:not(.light) {
  --ap-banner-fundo:  #0B5CA8;
  --ap-banner-sombra: none;
  --ap-cta-fundo:     #0069BA;
  --ap-cta-sombra:    none;
}

/* ============================================================
   LEITURA DO ATLAS: o cartão em que o Atlas fala (leitura, insight).
   Azul sólido da marca, igual nos dois modos, para se destacar como a
   voz do Atlas. Sem degradê, sem brilho, sem orbe. Destaques claros,
   feitos para ler sobre o azul.
   ============================================================ */
:root, .light {
  --ap-leitura-fundo:       #0B5299;
  --ap-leitura-borda:       rgba(255,255,255,0.10);
  --ap-leitura-titulo:      rgba(255,255,255,0.72);  /* "Atlas" em #FFFFFF, o resto neste tom */
  --ap-leitura-nota:        rgba(255,255,255,0.62);
  --ap-leitura-texto:       rgba(255,255,255,0.84);
  --ap-leitura-verde:       #8EF0C0;
  --ap-leitura-ambar:       #FFD486;
  --ap-leitura-vermelho:    #FFB4B8;
  --ap-leitura-botao-fundo: #FFFFFF;                 /* principal: texto na cor do fundo */
  --ap-leitura-botao-2:     rgba(255,255,255,0.12);  /* secundário: texto branco */
  --ap-leitura-botao-2-borda: rgba(255,255,255,0.18);
}

/* ============================================================
   ALIASES LEGADOS (--first-*): apontam para o v4.2.
   Mantidos para não quebrar código antigo; NÃO usar em código novo.
   O brilho deixou de existir: os nomes --first-glow-* ficam só por
   compatibilidade e valem uma sombra neutra. Não usar em código novo.
   ============================================================ */
:root, .light {
  --first-bg:            var(--ap-bg);
  --first-surface:       var(--ap-surface);
  --first-surface-2:     var(--ap-surface-2);
  --first-secondary:     var(--ap-surface-3);
  --first-blue:          var(--ap-blue);
  --first-blue-light:    var(--ap-accent);
  --first-accent:        var(--ap-accent);
  --first-muted:         var(--ap-text-faint);
  --first-border:        var(--ap-hairline-strong);
  --first-border-subtle: var(--ap-hairline-white);
  --first-glow-sm:       0 2px 8px rgba(0,0,0,0.28);
  --first-glow-md:       0 8px 24px rgba(0,0,0,0.34);
  --first-glow-lg:       var(--ap-depth);
  --first-glow-card:     var(--ap-depth);
}