/* =============================================================================
   advoq · Design Tokens
   -----------------------------------------------------------------------------
   Fonte da verdade do sistema de design. Todo valor visual do produto
   nasce aqui. Nenhum componente deve escrever cor, espaço, raio ou
   duração literal — sempre via var(--adv-*).

   Namespace: --adv-*
   Versão:    2.0.0
   Escala:    4px
   Temas:     :root (claro) · [data-theme="dark"] (escuro)

   -----------------------------------------------------------------------------
   AS DUAS CORES DE TRABALHO, E POR QUE CADA UMA
   -----------------------------------------------------------------------------
   Verde #009C3B e azul #002776 são os da bandeira. Não estão aqui como
   enfeite patriótico: estão porque cada um assumiu um papel que o sistema
   precisava separar.

     VERDE  = ação.  O botão que conclui, o estado ativo.
     AZUL   = fonte confirmada.  O filete da citação, o link, o "verificado".

   Isto resolve uma colisão real: se a cor da marca também sinalizasse
   "conferido", o botão primário e a promessa do produto seriam a mesma
   tinta, e nenhum dos dois significaria nada. Verde age, azul ancora.

   Consequência prática: no advoq, confirmação é AZUL, não verde. Existe
   `--adv-verified` justamente para esse papel ter nome próprio.

   -----------------------------------------------------------------------------
   A TERCEIRA COR, E A EXCEÇÃO QUE ELA OBRIGA A DECLARAR
   -----------------------------------------------------------------------------
   O logotipo carrega as TRÊS cores da bandeira: o anel do "o" é cortado em
   três arcos — verde, amarelo, azul. Isso cria uma colisão que precisa ser
   dita em voz alta, porque ela não desaparece por ser ignorada:

     na INTERFACE, amarelo/âmbar significa "exige revisão humana".
     no LOGOTIPO, amarelo é a bandeira, e não significa estado nenhum.

   A regra que resolve: A MARCA NÃO PARTICIPA DA SEMÂNTICA DE ESTADO.
   O selo é o único lugar do sistema em que as três cores aparecem juntas,
   e é o único lugar em que amarelo não quer dizer nada. Fora dele, nenhum
   componente pode usar `--adv-yellow-*`. Um selo dentro de um componente
   de estado — um alerta com o logotipo ao lado do rótulo "exige revisão" —
   é justamente o caso a evitar.

   Por isso o amarelo entrou como duas paradas nomeadas, e não como rampa:
   não há degrau de amarelo para o sistema escolher, então não há como
   escorregar de volta para a semântica do âmbar.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. PRIMITIVAS — valores brutos. Não use diretamente em componentes.
   Use os aliases semânticos da seção 2.
   -------------------------------------------------------------------------- */

:root {
  /* --- Neutros (frios, com viés de azul-marinho para casar com o azul) --- */
  --adv-neutral-0:    #ffffff;
  --adv-neutral-25:   #fafbfd;
  --adv-neutral-50:   #f4f6fa;
  --adv-neutral-100:  #eaeef5;
  --adv-neutral-200:  #dbe1ed;
  --adv-neutral-300:  #c2cbdd;
  --adv-neutral-400:  #9da8c0;
  --adv-neutral-500:  #737f99;
  --adv-neutral-600:  #556077;
  --adv-neutral-700:  #3d465a;
  --adv-neutral-800:  #28303f;
  --adv-neutral-900:  #171d28;
  --adv-neutral-950:  #0f131c;
  --adv-neutral-1000: #080b12;

  /* --- Verde · cor de marca, cor de ação -------------------------------- */
  /* O 600 é o verde exato da bandeira. O 500 é MAIS CLARO que ele, de
     propósito: o hover clareia, porque o texto do botão é navy e escurecer
     reduziria o contraste. */
  --adv-green-50:   #e8f7ee;
  --adv-green-100:  #c8edd6;
  --adv-green-200:  #97deb5;
  --adv-green-300:  #5fc98d;
  --adv-green-400:  #2cba6e;
  --adv-green-500:  #00ab41;
  --adv-green-600:  #009c3b; /* ← bandeira · a marca */
  --adv-green-700:  #00722b; /* o mais claro que passa AA como texto */
  --adv-green-800:  #005c23;
  --adv-green-900:  #00431a;
  --adv-green-950:  #002b10;

  /* --- Azul · fonte confirmada, links, estrutura profunda -------------- */
  --adv-blue-50:   #eaf1fd;
  --adv-blue-100:  #d2e1fb;
  --adv-blue-200:  #a9c5f6;
  --adv-blue-300:  #77a2ef;
  --adv-blue-400:  #4780e4;
  --adv-blue-500:  #1f5fd1;
  --adv-blue-600:  #1148a8; /* ← verificado · links (tema claro) */
  --adv-blue-700:  #0c3a8c;
  --adv-blue-800:  #073070;
  --adv-blue-900:  #002776; /* ← bandeira · campos profundos, tinta */
  --adv-blue-950:  #001b52;

  /* --- Amarelo · SÓ o selo da marca ------------------------------------
     Duas paradas, não uma rampa, e isso é deliberado. Uma rampa de dez
     degraus ao lado do âmbar seria uma armadilha: alguém usaria
     `yellow-700` como cor de texto e colidiria com `--adv-warning`, que
     é a cor de "exige revisão". Estes dois valores existem para desenhar
     os arcos do selo e para mais nada.

     NUNCA use amarelo em estado, em botão, em filete ou em texto. No
     advoq, amarelo na interface significa revisão humana pendente, e
     essa palavra é do âmbar. O selo é a exceção declarada — ver a nota
     das TRÊS CORES no topo deste arquivo. */
  --adv-yellow-flag: #ffdf00; /* ← bandeira · exato. O selo em fundo escuro. */
  --adv-yellow-deep: #e8c000; /* o selo em fundo claro: #FFDF00 dá 1,1:1
                                 sobre branco e o arco simplesmente some. */

  /* --- Âmbar · atenção, revisão humana necessária ----------------------- */
  --adv-amber-50:    #fff6e5;
  --adv-amber-100:   #ffe9bf;
  --adv-amber-500:   #e08700;
  --adv-amber-600:   #c06f00;
  --adv-amber-700:   #9a5800; /* o mais claro que passa AA como texto */
  --adv-amber-900:   #5a3300;

  /* --- Rubro · erro, risco processual ---------------------------------- */
  --adv-red-50:      #fdecee;
  --adv-red-100:     #fbd5da;
  --adv-red-400:     #ed6373; /* texto de erro no tema escuro */
  --adv-red-500:     #e23b4e;
  --adv-red-600:     #c82438;
  --adv-red-900:     #6a0f1b;

  /* --- Tipografia · famílias ------------------------------------------- */
  /* Grotesca geométrica: títulos, interface, dados. */
  --adv-font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  /* Serifada jurídica: texto longo, peças, citações. */
  --adv-font-serif:   "Newsreader", Georgia, "Times New Roman", serif;
  /* Mono técnica: rótulos, metadados, código, referências. */
  --adv-font-mono:    "DM Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --adv-font-sans:    var(--adv-font-display);

  /* --- Tipografia · pesos --------------------------------------------- */
  --adv-weight-light:    300;
  --adv-weight-regular:  400;
  --adv-weight-medium:   500;
  --adv-weight-semibold: 600;
  --adv-weight-bold:     700;

  /* --- Tipografia · escala (fluida nos displays) ----------------------- */
  --adv-text-display-2xl: clamp(2.75rem, 1.55rem + 4.8vw, 5rem);
  --adv-text-display-xl:  clamp(2.25rem, 1.55rem + 2.8vw, 3.5rem);
  --adv-text-display-lg:  clamp(1.875rem, 1.45rem + 1.7vw, 2.5rem);
  --adv-text-h1:          clamp(1.625rem, 1.35rem + 1.1vw, 2rem);
  --adv-text-h2:          1.5rem;
  --adv-text-h3:          1.25rem;
  --adv-text-h4:          1.0625rem;
  --adv-text-body-lg:     1.125rem;
  --adv-text-body:        1rem;
  --adv-text-body-sm:     0.9375rem;
  --adv-text-caption:     0.8125rem;
  --adv-text-micro:       0.6875rem;

  /* --- Tipografia · entrelinha ---------------------------------------- */
  --adv-leading-none:    1;
  --adv-leading-tight:   1.06;
  --adv-leading-snug:    1.2;
  --adv-leading-normal:  1.5;
  --adv-leading-relaxed: 1.65;
  --adv-leading-loose:   1.8;

  /* --- Tipografia · entreletra ---------------------------------------- */
  --adv-tracking-display: -0.035em;
  --adv-tracking-tight:   -0.02em;
  --adv-tracking-normal:  -0.005em;
  --adv-tracking-wide:    0.02em;
  --adv-tracking-label:   0.14em; /* mono maiúsculo */

  /* --- Espaçamento · base 4px ---------------------------------------- */
  --adv-space-0:   0;
  --adv-space-px:  1px;
  --adv-space-1:   0.25rem;  /*  4 */
  --adv-space-2:   0.5rem;   /*  8 */
  --adv-space-3:   0.75rem;  /* 12 */
  --adv-space-4:   1rem;     /* 16 */
  --adv-space-5:   1.25rem;  /* 20 */
  --adv-space-6:   1.5rem;   /* 24 */
  --adv-space-7:   2rem;     /* 32 */
  --adv-space-8:   2.5rem;   /* 40 */
  --adv-space-9:   3rem;     /* 48 */
  --adv-space-10:  4rem;     /* 64 */
  --adv-space-11:  5rem;     /* 80 */
  --adv-space-12:  6rem;     /* 96 */
  --adv-space-13:  8rem;     /* 128 */
  --adv-space-14:  10rem;    /* 160 */

  /* --- Raios · geometria contida, nunca "bolha" ----------------------- */
  --adv-radius-none: 0;
  --adv-radius-xs:   2px;
  --adv-radius-sm:   4px;
  --adv-radius-md:   6px;
  --adv-radius-lg:   10px;
  --adv-radius-xl:   14px;
  --adv-radius-2xl:  20px;
  --adv-radius-pill: 999px;

  /* --- Traços -------------------------------------------------------- */
  --adv-stroke-hairline: 1px;
  --adv-stroke-thick:    2px;
  --adv-stroke-rule:     3px; /* filete de citação */

  /* --- Sombras · frias e discretas. Regra: filete antes de sombra. --- */
  --adv-shadow-none: none;
  --adv-shadow-xs:   0 1px 2px rgba(15, 19, 28, 0.05);
  --adv-shadow-sm:   0 1px 2px rgba(15, 19, 28, 0.06), 0 1px 1px rgba(15, 19, 28, 0.04);
  --adv-shadow-md:   0 4px 12px -2px rgba(15, 19, 28, 0.08), 0 2px 4px -2px rgba(15, 19, 28, 0.06);
  --adv-shadow-lg:   0 12px 32px -8px rgba(15, 19, 28, 0.12), 0 4px 8px -4px rgba(15, 19, 28, 0.06);
  --adv-shadow-xl:   0 24px 64px -16px rgba(15, 19, 28, 0.16), 0 8px 16px -8px rgba(15, 19, 28, 0.06);

  /* --- Movimento ----------------------------------------------------- */
  --adv-dur-instant:    80ms;
  --adv-dur-fast:       140ms;
  --adv-dur-base:       220ms;
  --adv-dur-slow:       360ms;
  --adv-dur-deliberate: 620ms;

  --adv-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --adv-ease-in:     cubic-bezier(0.5, 0, 0.9, 0.3);
  --adv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --adv-ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1);

  /* --- Camadas ------------------------------------------------------- */
  --adv-z-base:     0;
  --adv-z-raised:   10;
  --adv-z-sticky:   100;
  --adv-z-dropdown: 300;
  --adv-z-overlay:  400;
  --adv-z-modal:    500;
  --adv-z-toast:    700;

  /* --- Layout -------------------------------------------------------- */
  --adv-container-sm: 42rem;   /* 672 — texto longo */
  --adv-container-md: 56rem;   /* 896 */
  --adv-container-lg: 72rem;   /* 1152 — padrão de página */
  --adv-container-xl: 84rem;   /* 1344 — painéis */
  --adv-gutter:       clamp(1.25rem, 4vw, 3.5rem);
  --adv-section-y:    clamp(3.5rem, 8vw, 7.5rem);
  --adv-grid-cell:    64px;    /* malha de filetes do fundo */
}

/* -----------------------------------------------------------------------------
   2. SEMÂNTICOS — a camada que os componentes consomem.
   Trocar de tema significa remapear apenas esta seção.
   -------------------------------------------------------------------------- */

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

  /* Superfícies */
  --adv-bg:              var(--adv-neutral-0);
  --adv-bg-subtle:       var(--adv-neutral-50);
  --adv-surface:         var(--adv-neutral-0);
  --adv-surface-subtle:  var(--adv-neutral-50);
  --adv-surface-sunken:  var(--adv-neutral-100);
  --adv-surface-raised:  var(--adv-neutral-0);
  --adv-surface-inverse: var(--adv-neutral-950);

  /* Texto — todos os papéis abaixo passam WCAG AA (4.5:1) sobre `bg` e
     `surface-subtle`, EXCETO `text-subtle` (4,0:1). Use `text-subtle`
     apenas em placeholder e ornamento; nunca em informação necessária. */
  --adv-text:           var(--adv-neutral-950); /* 18,6:1 */
  --adv-text-secondary: var(--adv-neutral-700); /*  9,5:1 */
  --adv-text-muted:     var(--adv-neutral-600); /*  6,3:1 */
  --adv-text-subtle:    var(--adv-neutral-500); /*  4,0:1 — só ornamento */
  --adv-text-inverse:   var(--adv-neutral-0);
  --adv-text-accent:    var(--adv-green-700);   /*  6,1:1 — verde só passa aqui */
  --adv-text-link:      var(--adv-blue-600);    /*  8,4:1 */

  /* Filetes e bordas.
     `border-subtle`/`border`/`border-strong` são ornamentais — separam
     regiões e não identificam controle, portanto estão fora da regra 1.4.11.
     `border-control` é a borda de campo de formulário: precisa de 3:1 contra
     o fundo, por isso é bem mais escura do que a estética pediria. */
  --adv-border-subtle:  var(--adv-neutral-100);
  --adv-border:         var(--adv-neutral-200);
  --adv-border-strong:  var(--adv-neutral-300);
  --adv-border-control: var(--adv-neutral-500); /* 4,0:1 */
  --adv-border-control-hover: var(--adv-neutral-600);
  --adv-border-accent:  var(--adv-green-600);
  --adv-border-inverse: var(--adv-neutral-800);

  /* Ação primária · VERDE.
     O primeiro plano é navy, não branco: branco sobre o verde da bandeira
     dá 3,6:1 e reprovaria. Navy sobre o mesmo verde dá 5,2:1. Por isso o
     hover CLAREIA (green-500) em vez de escurecer — escurecer aproximaria
     o fundo do texto. */
  --adv-accent:            var(--adv-green-600);
  --adv-accent-hover:      var(--adv-green-500);
  --adv-accent-active:     var(--adv-green-400);
  --adv-accent-fg:         var(--adv-neutral-950); /* 5,2:1 sobre o verde */
  --adv-accent-subtle:     var(--adv-green-50);
  --adv-accent-subtle-fg:  var(--adv-green-800);
  --adv-accent-border:     var(--adv-green-200);

  /* Fonte confirmada · AZUL. O papel-assinatura do produto. */
  --adv-verified:        var(--adv-blue-600); /* 8,4:1 */
  --adv-verified-subtle: var(--adv-blue-50);
  --adv-verified-fg:     var(--adv-blue-900);

  /* O selo · os três arcos do logotipo. Uso EXCLUSIVO da marca.
     Existem como token porque a marca também é desenhada em linha (SVG
     dentro do HTML, topbar, e-mail), e nesses lugares o valor literal
     divergiria dos arquivos de assets/logo/ no primeiro ajuste. */
  --adv-seal-green:  var(--adv-green-600);
  --adv-seal-yellow: var(--adv-yellow-deep); /* rebaixado: ver a nota do amarelo */
  --adv-seal-blue:   var(--adv-blue-600);

  /* Estados. Os tons vivos (500/600) reprovariam como texto sobre branco,
     então o alias semântico aponta um passo mais escuro: estes valores
     servem ao mesmo tempo como filete e como rótulo. */
  --adv-success:        var(--adv-verified);        /* apelido — ver nota do topo */
  --adv-success-subtle: var(--adv-verified-subtle);
  --adv-success-fg:     var(--adv-verified-fg);
  --adv-warning:        var(--adv-amber-700);  /* 5,6:1 */
  --adv-warning-subtle: var(--adv-amber-50);
  --adv-warning-fg:     var(--adv-amber-900);
  --adv-danger:         var(--adv-red-600);    /* 5,6:1 */
  --adv-danger-subtle:  var(--adv-red-50);
  --adv-danger-fg:      var(--adv-red-900);
  /* Preenchimento de botão destrutivo. Fixo nos dois temas: o contraste que
     importa é texto-sobre-botão, não botão-sobre-página. */
  --adv-danger-solid:    var(--adv-red-600);
  --adv-danger-solid-fg: var(--adv-neutral-0);
  --adv-info:           var(--adv-blue-600);
  --adv-info-subtle:    var(--adv-blue-50);
  --adv-info-fg:        var(--adv-blue-900);

  /* Foco — nunca remover, apenas restilizar */
  --adv-focus-ring:   0 0 0 3px rgba(0, 156, 59, 0.32);
  --adv-focus-color:  var(--adv-green-700);

  /* Overlay */
  --adv-overlay: rgba(8, 11, 18, 0.5);

  /* Elevação semântica */
  --adv-elevation-card:    var(--adv-shadow-none);
  --adv-elevation-hover:   var(--adv-shadow-md);
  --adv-elevation-popover: var(--adv-shadow-lg);
  --adv-elevation-modal:   var(--adv-shadow-xl);
}

[data-theme="dark"] {
  color-scheme: dark;

  --adv-bg:              var(--adv-neutral-1000);
  --adv-bg-subtle:       var(--adv-neutral-950);
  --adv-surface:         var(--adv-neutral-950);
  --adv-surface-subtle:  var(--adv-neutral-900);
  --adv-surface-sunken:  var(--adv-neutral-1000);
  --adv-surface-raised:  var(--adv-neutral-900);
  --adv-surface-inverse: var(--adv-neutral-0);

  --adv-text:           var(--adv-neutral-50);  /* 18,2:1 */
  --adv-text-secondary: var(--adv-neutral-300); /* 12,1:1 */
  --adv-text-muted:     var(--adv-neutral-400); /*  8,2:1 */
  --adv-text-subtle:    var(--adv-neutral-500); /*  4,9:1 */
  --adv-text-inverse:   var(--adv-neutral-950);
  --adv-text-accent:    var(--adv-green-300);   /*  8,2:1 */
  --adv-text-link:      var(--adv-blue-300);    /*  7,3:1 */

  --adv-border-subtle:  var(--adv-neutral-900);
  --adv-border:         var(--adv-neutral-800);
  --adv-border-strong:  var(--adv-neutral-700);
  --adv-border-control: var(--adv-neutral-600);
  --adv-border-control-hover: var(--adv-neutral-500);
  --adv-border-accent:  var(--adv-green-500);
  --adv-border-inverse: var(--adv-neutral-200);

  /* No escuro o verde ganha um passo de brilho para não afundar no fundo;
     o primeiro plano continua navy. */
  --adv-accent:           var(--adv-green-500);
  --adv-accent-hover:     var(--adv-green-400);
  --adv-accent-active:    var(--adv-green-300);
  --adv-accent-fg:        var(--adv-neutral-950); /* 6,1:1 sobre o verde-500 */
  --adv-accent-subtle:    rgba(0, 171, 65, 0.16);
  --adv-accent-subtle-fg: var(--adv-green-200);
  --adv-accent-border:    rgba(0, 171, 65, 0.34);

  --adv-verified:        var(--adv-blue-300); /* 7,3:1 */
  --adv-verified-subtle: rgba(17, 72, 168, 0.22);
  --adv-verified-fg:     var(--adv-blue-100);

  /* O selo · a marca nasce aqui. É o único conjunto do sistema em que o
     tema ESCURO carrega o valor exato e o claro é que corrige: #FFDF00 é
     o amarelo da bandeira e sobre escuro ele não precisa de ajuste
     nenhum. Verde e azul sobem um degrau pelo motivo de sempre. */
  --adv-seal-green:  var(--adv-green-400);
  --adv-seal-yellow: var(--adv-yellow-flag); /* exato */
  --adv-seal-blue:   var(--adv-blue-300);

  --adv-success:        var(--adv-verified);
  --adv-success-subtle: var(--adv-verified-subtle);
  --adv-success-fg:     var(--adv-verified-fg);
  --adv-warning:        var(--adv-amber-500);
  --adv-warning-subtle: rgba(224, 135, 0, 0.14);
  --adv-warning-fg:     var(--adv-amber-100);
  --adv-danger:         var(--adv-red-400); /* red-500 reprovaria como texto */
  --adv-danger-subtle:  rgba(226, 59, 78, 0.14);
  --adv-danger-fg:      var(--adv-red-100);
  --adv-danger-solid:    var(--adv-red-600);
  --adv-danger-solid-fg: var(--adv-neutral-0);
  --adv-info:           var(--adv-blue-300);
  --adv-info-subtle:    rgba(17, 72, 168, 0.22);
  --adv-info-fg:        var(--adv-blue-100);

  --adv-focus-ring:  0 0 0 3px rgba(0, 171, 65, 0.45);
  --adv-focus-color: var(--adv-green-400);

  --adv-overlay: rgba(0, 0, 0, 0.68);

  /* No escuro, profundidade vem de superfície + filete, não de sombra. */
  --adv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --adv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --adv-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --adv-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  --adv-shadow-xl: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
}

/* -----------------------------------------------------------------------------
   3. PREFERÊNCIAS DO USUÁRIO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --adv-dur-instant:    1ms;
    --adv-dur-fast:       1ms;
    --adv-dur-base:       1ms;
    --adv-dur-slow:       1ms;
    --adv-dur-deliberate: 1ms;
  }
}