/* ==========================================================================
   LAUDIX · TOKENS
   Sistema de design do "Terminal Laudix".
   Uma única fonte de verdade para cor, tipo, espaço, movimento e grade.
   ========================================================================== */

:root{
  /* ---------------------------------------------------------------------
     1. COR — Deep Industrial
     A paleta nasce da marca real (âmbar do logo + verde-menta da engrenagem),
     industrializada para um fundo de sala de controle.
     Nada de ciano/neon genérico de template: o acento é o âmbar da Laudix.
     --------------------------------------------------------------------- */

  /* Superfícies, do mais profundo ao mais elevado */
  --lx-void:      #07080B;   /* fundo absoluto, atrás de tudo */
  --lx-base:      #0B0D11;   /* canvas da página */
  --lx-panel:     #101318;   /* cartões, superfícies */
  --lx-panel-2:   #151A22;   /* superfície elevada */
  --lx-panel-3:   #1B212B;   /* hover de superfície */

  /* Linhas — a malha técnica */
  --lx-line:      #1D222B;   /* borda padrão */
  --lx-line-2:    #2A313D;   /* borda reforçada / foco */
  --lx-line-3:    #3A4352;   /* borda ativa */

  /* Acento primário — Âmbar Laudix (do logo) */
  --lx-gold:      #F0B429;
  --lx-gold-2:    #FFCE55;   /* hover */
  --lx-gold-3:    #C28E15;   /* pressionado */
  --lx-gold-a12:  rgba(240,180,41,.12);
  --lx-gold-a24:  rgba(240,180,41,.24);
  --lx-gold-a40:  rgba(240,180,41,.40);

  /* Acento semântico — Verde conformidade (do logo) */
  --lx-ok:        #3DDC97;
  --lx-ok-2:      #62E9AE;
  --lx-ok-a12:    rgba(61,220,151,.12);
  --lx-ok-a24:    rgba(61,220,151,.24);

  /* Semânticos de estado */
  --lx-alert:     #FF5A4D;
  --lx-alert-a12: rgba(255,90,77,.12);
  --lx-warn:      #FFA53D;
  --lx-info:      #5AA9FF;
  --lx-info-a12:  rgba(90,169,255,.12);

  /* Texto sobre fundo escuro */
  --lx-text:      #F2F4F7;
  --lx-text-2:    rgba(242,244,247,.68);
  --lx-text-3:    rgba(242,244,247,.44);
  --lx-text-4:    rgba(242,244,247,.26);

  /* ---------------------------------------------------------------------
     2. COR — Seção "Papel Técnico" (a inversão de atenção)
     Não é um light mode: é uma folha de desenho técnica, quente, sobre a
     qual o risco é examinado. Contraste proposital com o terminal escuro.
     --------------------------------------------------------------------- */
  --lx-paper:     #F5F2EA;   /* papel de prancheta */
  --lx-paper-2:   #ECE7DB;   /* papel sombreado */
  --lx-paper-3:   #E0D9C9;   /* papel elevado */
  --lx-ink:       #12151A;   /* texto sobre papel */
  --lx-ink-2:     rgba(18,21,26,.70);
  --lx-ink-3:     rgba(18,21,26,.46);
  --lx-paper-line:rgba(18,21,26,.12);
  --lx-paper-line-2:rgba(18,21,26,.22);
  --lx-paper-gold:#9A6F08;   /* âmbar escurecido p/ contraste AA sobre papel */

  /* ---------------------------------------------------------------------
     3. TIPOGRAFIA
     --------------------------------------------------------------------- */
  --f-display:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-body:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Escala fluida — razão ~1.25, travada para nunca quebrar layout */
  --t-mono:      clamp(10.5px, 0.72vw, 11.5px);  /* rótulos técnicos */
  --t-mono-lg:   clamp(11.5px, 0.82vw, 13px);
  --t-xs:        clamp(12px, 0.85vw, 13px);
  --t-sm:        clamp(13.5px, 0.95vw, 15px);
  --t-base:      clamp(15px, 1.05vw, 16.5px);
  --t-lg:        clamp(17px, 1.25vw, 19px);
  --t-xl:        clamp(20px, 1.6vw, 24px);
  --t-2xl:       clamp(26px, 2.6vw, 36px);
  --t-3xl:       clamp(32px, 4vw, 54px);
  --t-4xl:       clamp(38px, 6vw, 78px);
  --t-5xl:       clamp(44px, 8.5vw, 118px);

  --lh-tight:    1.04;
  --lh-snug:     1.16;
  --lh-normal:   1.5;
  --lh-relaxed:  1.68;

  --ls-tighter:  -.045em;   /* display grande */
  --ls-tight:    -.028em;   /* títulos */
  --ls-normal:   0;
  --ls-wide:     .06em;     /* mono maiúsculo */
  --ls-wider:    .14em;     /* micro-rótulos */

  /* ---------------------------------------------------------------------
     4. ESPAÇO & GRADE
     --------------------------------------------------------------------- */
  --maxw:        1320px;
  --maxw-text:   68ch;
  --gutter:      clamp(20px, 4.2vw, 56px);

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 44px;  --sp-8: 64px;
  --sp-9: 88px;  --sp-10: 120px; --sp-11: 160px;

  --section-y: clamp(72px, 9vw, 148px);

  /* A malha blueprint */
  --grid-unit:   40px;
  --grid-unit-sm:20px;

  /* ---------------------------------------------------------------------
     5. FORMA & ELEVAÇÃO
     Cantos contidos — precisão técnica, não "bolha de SaaS".
     --------------------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px -4px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --shadow-3: 0 18px 48px -12px rgba(0,0,0,.7), 0 4px 12px -4px rgba(0,0,0,.5);
  --glow-gold: 0 0 0 1px var(--lx-gold-a24), 0 8px 32px -8px rgba(240,180,41,.30);
  --glow-ok:   0 0 0 1px var(--lx-ok-a24),  0 8px 32px -8px rgba(61,220,151,.28);

  /* ---------------------------------------------------------------------
     6. MOVIMENTO
     Curvas únicas — a assinatura de "software rápido" da Linear/Attio.
     --------------------------------------------------------------------- */
  --e-out:     cubic-bezier(.16, 1, .3, 1);      /* desaceleração suave */
  --e-in-out:  cubic-bezier(.65, 0, .35, 1);
  --e-spring:  cubic-bezier(.34, 1.56, .64, 1);  /* leve ultrapassagem */
  --e-snap:    cubic-bezier(.2, .9, .25, 1);

  --d-fast:   140ms;
  --d-base:   220ms;
  --d-slow:   420ms;
  --d-slower: 720ms;

  /* ---------------------------------------------------------------------
     7. CAMADAS
     --------------------------------------------------------------------- */
  --z-grid:   0;
  --z-base:   1;
  --z-sticky: 40;
  --z-nav:    50;
  --z-rail:   45;
  --z-panel:  70;
  --z-modal:  80;
  --z-cursor: 90;
  --z-boot:   100;

  /* ---------------------------------------------------------------------
     8. MEDIDAS DE INTERFACE
     --------------------------------------------------------------------- */
  --nav-h:    96px;   /* comporta a marca em tamanho de leitura */
  --rail-w:   64px;
  --hairline: 1px;
}

@media (max-width:1080px){
  :root{ --nav-h: 80px; }
}
@media (max-width:620px){
  :root{ --nav-h: 72px; }
}

/* ==========================================================================
   Modo de movimento reduzido
   Desliga a ambição, não a informação. Tudo continua legível e navegável.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  :root{
    --d-fast:0ms; --d-base:0ms; --d-slow:0ms; --d-slower:0ms;
  }
}