@import url("./section-title.css");

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* ------------------------------------------------------------------------------ */


* {
    box-sizing: border-box;
    position: relative;
}


.eicon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--space-small, 12px);
    height: var(--space-small, 12px);
}


/* ------------------------------------------------------------------------------ */


:root {
    --color-palette-primary: #1c91e4;
    --color-palette-secondary: #4fbefe;
    --color-palette-accent: #ff6f3c;
    --color-palette-background: #f6f7fc;
    --color-palette-primary-surface: #eef7ff;

    --color-surface: #ffffff;
    --color-border: #e2e8f0;
    --color-canvas-dark: #0a1628;
    --color-surface-dark: #101f38;
    --color-text-on-dark: #ffffff;
    --color-muted-on-dark: rgba(255, 255, 255, 0.6);
    --color-border-on-dark: rgba(255, 255, 255, 0.12);
    --color-code-background: #0f172a;
    --color-code-text: #e2e8f0;

    /* -------------------------------------------------------------------------- */

    --color-text-dark: #0f172a;
    --color-muted: #475569;

    /* -------------------------------------------------------------------------- */

    /* TOKENS SEMÂNTICOS — um único vermelho de erro, um único verde de sucesso,
       um único âmbar de alerta e um único cinza de estado desabilitado para TODO
       o sistema (botões, formulários, modais, badges, banners, toasts). Informação
       neutra usa o par primário (--color-palette-primary / -primary-surface) —
       não existe um azul semântico separado. */

    --color-danger: #ef4444;
    --color-danger-surface: #fef2f2;
    --color-success: #22c55e;
    --color-success-surface: #f0fdf4;
    --color-warning: #f59e0b;
    --color-warning-surface: #fffbeb;
    --color-disabled: #94a3b8;
    --color-disabled-deep: #64748b;

    /* -------------------------------------------------------------------------- */

    /* TOKENS DE CANAL — cada canal de conversa tem UMA cor só, igual em toda a
       plataforma (site, console, admin, extensão). E-mail e voz falam com as
       próprias cores da casa: o canal que a eesier opera usa a paleta da
       eesier. WhatsApp e LinkedIn trazem o azul e o verde institucionais de
       marcas de terceiro — as únicas cores do sistema que não são nossas, e
       por isso moram em tokens em vez de espalhadas em hex pelos componentes
       (ver .btn-zap em buttons.css). Cor de canal identifica a ORIGEM da
       mensagem e nunca substitui um token semântico: o verde do WhatsApp não
       é sucesso, o laranja da voz não é alerta. */

    --color-channel-email: var(--color-palette-primary);
    --color-channel-whatsapp: #25d366;
    --color-channel-voice: var(--color-palette-accent);
    --color-channel-linkedin: #0a66c2;

    /* IDENTIDADE CATEGÓRICA — oito tintas estáveis para distinguir participantes
       pseudônimos. Não comunicam sucesso, alerta ou erro e nunca substituem os
       tokens semânticos. */

    --color-identity-1: #1d4ed8;
    --color-identity-2: #0e7490;
    --color-identity-3: #0f766e;
    --color-identity-4: #4338ca;
    --color-identity-5: #7e22ce;
    --color-identity-6: #a21caf;
    --color-identity-7: #be123c;
    --color-identity-8: #c2410c;

    /* VÉU — a tinta a 5% dos filetes decorativos (filete do cabeçalho de
       página, régua dos grupos do menu lateral): UMA SÓ TINTA em todo o
       sistema, num par claro/escuro que sempre casa. Nunca preto/branco
       puros — a mesma penumbra (5%), mas com as cores da casa: no claro o
       navy da tinta do texto; no escuro o azul secundário, o mesmo desvio
       que todo destaque faz no escuro. */

    --color-veil: color-mix(in srgb, var(--color-text-dark) 5%, transparent);
    --color-veil-on-dark: color-mix(in srgb, var(--color-palette-secondary) 5%, transparent);

    /* -------------------------------------------------------------------------- */

    /* ESCALA HARMÔNICA DE ESPAÇAMENTO — os únicos valores permitidos para
       margens, gaps e paddings. 6px é reservado a microespaços dentro de um
       único controle; 12/24/48px estruturam componentes, relações e seções. */

    --space-tight: 6px;
    --space-small: 12px;
    --space-medium: 24px;
    --space-large: 48px;

    --radius-standard: 12px;
    --radius-pill: 999px;

    --control-height: var(--space-large);
    --control-square-size: calc(var(--space-small) * 6);
    --brand-mark-height: var(--space-medium);

    /* ESCALA TIPOGRÁFICA — seis degraus. A hierarquia vem de tamanho + peso;
       não criamos um tamanho novo para cada componente. Texto de interação
       primária (menu, botão e campo) = 14px — o ÚNICO degrau sem âncora na
       grade, e por isso o único que se move no toque (ver o @media abaixo).
       Os demais são ancorados: 12px = --space-small (a altura do badge é
       12 + 6 + 6 = 24px = --space-medium), 16px = --icon-size, 24px =
       --space-medium, e --brand-mark-height rege .text-page-title. */

    --type-size-xs: 0.75rem;
    --type-size-small: 0.875rem;
    --type-size-base: 1rem;
    --type-size-heading: 1.5rem;
    --type-size-page: 2rem;
    --type-size-display: 2.5rem;
    --type-size-hero: 4.5rem;

    /* RAZÃO DE CAP HEIGHT DA QUICKSAND (capHeight 700 / unitsPerEm 1000). COM
       text-box-edge: cap alphabetic A CAIXA RENDERIZADA É O CAP HEIGHT; PARA UMA
       ALTURA-DE-INK EXATA usa-se font-size = alturaAlvo / esta razão. */

    --font-cap-ratio: 0.7;

    /* -------------------------------------------------------------------------- */

    /* TAMANHO DE ÍCONE ESTRUTURAL — ícones de navegação, catálogos e ações
       medem 16px, numa caixa quadrada única: um passo acima dos rótulos de
       14px no ponteiro fino e exatamente do tamanho deles no toque. Os
       desenhos preservam a grade vetorial Tabler e o recorte óptico. Ícones
       inline no meio do texto ficam em 1em. O ícone NUNCA muda de tamanho —
       nem no toque: ele é âncora da grade e espelho de EesierBrand.IconSize. */

    --icon-size: 16px;

    /* -------------------------------------------------------------------------- */

    /* LINGUAGEM DE MOVIMENTO — três tempos na mesma razão ×2 da escala de
       espaçamento: 0.09s para pressionar (resposta imediata ao toque), 0.18s
       para mudanças de estado (cor, fundo, borda, opacidade) e 0.36s para tudo
       que viaja (posição, tamanho, escala). Estados fundem com --ease-state;
       movimento sempre desacelera ao chegar com --ease-travel (parte rápido,
       assenta suave). Nenhuma duração fora desta escala. */

    --motion-press: 0.09s;
    --motion-quick: 0.18s;
    --motion-standard: 0.36s;

    --ease-state: ease-in-out;
    --ease-travel: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------------------ */

/* PONTEIRO GROSSO (TOQUE) — O TEXTO DE INTERFACE SOBE UM DEGRAU: 14px → 16px.
   UMA ÚNICA LINHA MOVE O SISTEMA INTEIRO, porque todo papel de interface
   (corpo, navegação, rótulo, valor, botão, campo e busca) lê este mesmo token.
   Nenhum componente ganha exceção própria.

   POR QUE 16px: o Safari do iOS amplia a página inteira ao focar QUALQUER
   campo com fonte menor que 16px — 16px é o menor tamanho que não dispara o
   zoom. A alternativa (maximum-scale=1 / user-scalable=no na viewport) está
   proibida: desligar o zoom de pinça é barreira de acessibilidade. E 16px é
   também a leitura confortável no dedo, à distância de telefone.

   POR QUE A GRADE NÃO SE MOVE: 6/12/24/48px, --control-height (48px),
   --icon-size (16px) e --radius-standard (12px) ficam idênticos. A cadência
   vertical é a entrelinha de 24px (--space-medium), e ela ABSORVE o degrau
   exatamente — a entrelinha só muda de razão, de 24/14 = 1,71 para 24/16 =
   1,5 (a razão canônica de texto corrido). A tinta cresce dentro da MESMA
   caixa; nenhuma linha de base se desloca. Escalar a grade junto (×16/14)
   daria 6,86 / 13,71 / 27,43 / 54,86px — pixels fracionários, filetes
   borrados, alvo de toque fora dos 48px e o espelho C# (EesierBrand)
   dessincronizado. A harmonia se preserva mantendo a grade, não esticando-a.

   OS OUTROS DEGRAUS NÃO SOBEM porque são ancorados na grade: 12px sustenta a
   altura de 24px do badge (12 + 6 + 6) e do avatar pequeno; 16px é
   --icon-size; 24px é --space-medium. Mover qualquer um deles tira um
   componente da grade. 14px era o único degrau solto — no toque ele encaixa
   na âncora seguinte. */

@media (pointer: coarse) {

    :root {
        --type-size-small: var(--type-size-base);
    }
}

/* ------------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6, p, ul, li {
    margin: 0;
    padding: 0;
}

/* AS FONTES CARREGAM ESPAÇO INTERNO (leading acima do cap height e abaixo da
   baseline) — APARAMOS SOMENTE PAPÉIS TIPOGRÁFICOS PARA O GLIFO TOCAR A CAIXA.
   Elementos estruturais preservam sua geometria; aplicar o recorte a forms,
   grupos ou containers colapsa a altura usada pelo layout. */

h1, h2, h3, h4, h5, h6, p,
.text-heading-1, .text-heading-2, .text-heading-3, .text-heading-4, .text-heading-5, .text-heading-6,
.text-body, .text-label, .text-navigation-group, .text-navigation-item, .text-field-label, .text-field-label-compact,
.text-field-value, .text-section-description, .text-validation, .text-button, .text-button-compact, .text-action-primary,
.text-design-name, .text-design-meta, .text-font-specimen, .text-page-title, strong, .text-emphasis {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* EXCEÇÃO — CAMPOS DE FORMULÁRIO: aparar o texto DIGITADO recorta os glifos
   dentro da caixa do controle (descendentes cortados, cursor deslocado). O
   texto do usuário é dado, não tipografia de interface — mantém a caixa cheia. */

input, textarea, select {
    text-box-trim: none;
    text-box-edge: auto;
}

.text-hero {
    font-size: var(--type-size-hero);
    font-weight: 600;
    line-height: 1.12;
}
@media (max-width: 900px) {
    .text-hero { font-size: var(--type-size-display); }
}

h1, .text-heading-1 {
    font-size: var(--type-size-display);
    font-weight: 700;
    line-height: 1.2;
}

h2, .text-heading-2 {
    font-size: var(--type-size-page);
    font-weight: 700;
    line-height: 1.3;
}

.text-page-title {
    /* CAP HEIGHT == --brand-mark-height (24px), CASANDO EXATAMENTE COM A ALTURA DO
       LOGO NA SIDENAV — font-size DERIVA DA RAZÃO DE CAP DA FONTE. */

    font-size: calc(var(--brand-mark-height) / var(--font-cap-ratio));
    font-weight: 700;
    line-height: 1;
}

h3, .text-heading-3,
h4, .text-heading-4,
h5, .text-heading-5 {
    font-size: var(--type-size-heading);
    font-weight: 600;
    line-height: 1.3;
}

h6, .text-heading-6 {
    font-size: var(--type-size-base);
    font-weight: 500;
    line-height: 1.5;
}

.text-label {
    font-size: var(--type-size-small);
    font-weight: 500;
    line-height: 1.5;
}


.text-design-name {
    font-size: var(--type-size-small);
    font-weight: 700;
    line-height: 1.5;
}


.text-design-meta {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--type-size-small);
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
}


.text-font-specimen {
    font-size: var(--type-size-heading);
    font-weight: 400;
    line-height: 1.4;
}


strong,
.text-emphasis {
    font-weight: 700;
}


.text-weight-300 {
    font-weight: 300;
}


.text-weight-400 {
    font-weight: 400;
}


.text-weight-500 {
    font-weight: 500;
}


.text-weight-600 {
    font-weight: 600;
}


.text-weight-700 {
    font-weight: 700;
}

/* PROSA — O ALINHAMENTO PADRÃO DO SISTEMA PARA TEXTO CORRIDO: JUSTIFICADO COM
   ÚLTIMA LINHA À ESQUERDA E HIFENIZAÇÃO AUTOMÁTICA (CORTA A PALAVRA COM HÍFEN
   NO FIM DA LINHA; EXIGE lang NO DOCUMENTO). PARÁGRAFOS DE UMA LINHA NÃO
   MUDAM. COMPONENTES CONSUMIDOS STANDALONE (SEM site.css) CARREGAM A MESMA
   RECEITA COM FALLBACKS — ex.: .eesier-tooltip-balloon EM feedback.css. */

p, .text-body {
    font-size: var(--type-size-small);
    line-height: var(--space-medium);
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.text-navigation-group {
    font-size: var(--type-size-small);
    font-weight: 700;
    line-height: var(--space-medium);
    text-transform: lowercase;
}

.text-navigation-item,
.text-field-label,
.text-field-value,
.text-button,
.text-action-primary {
    font-size: var(--type-size-small);
    font-weight: 500;
    line-height: 1.5;
    text-transform: lowercase;
}

.text-navigation-item {
    line-height: var(--space-medium);
}

.text-field-label-compact {
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: 1.5;
    text-transform: lowercase;
}

.text-section-description {
    font-size: var(--type-size-small);
    font-weight: 500;
    line-height: 1.5;
}

.text-validation {
    font-size: var(--type-size-xs);
    font-weight: 500;
    line-height: 1.5;
}

.text-button-compact {
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: 1.5;
    text-transform: lowercase;
}

.text-action-primary {
    font-weight: 700;
    line-height: 1.5;
    text-transform: lowercase;
}

.text-button {
    font-weight: 600;
}

.text-muted {
    color: var(--color-muted);
}


/* ------------------------------------------------------------------------------ */


body {
    margin: 0px;
    padding: 0px;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
    /* -------------------------------------------------------------------------- */
    font-family: 'Quicksand', sans-serif;
    /* -------------------------------------------------------------------------- */
    background: var(--color-palette-background);
    color: var(--color-text-dark);
    /* -------------------------------------------------------------------------- */
    font-size: var(--type-size-small);
    font-weight: 400;
    /* -------------------------------------------------------------------------- */
    /* MARCA MINÚSCULA — nenhuma letra maiúscula na interface: todo texto herda
       lowercase daqui. Exceções logo abaixo: código/identificadores e texto
       digitado pelo usuário preservam a caixa real. */
    text-transform: lowercase;
}

code, pre, kbd, samp, input, textarea, select {
    text-transform: none;
}


/* NOME PRÓPRIO OU VALOR MONETÁRIO VINDO DE DADO — o nome de uma pessoa, de uma empresa ou de
   qualquer entidade que a interface apenas EXIBE preserva a caixa em que foi
   escrito, pela mesma razão que input/textarea/select: é dado, não texto de
   interface. Achatar "Construtora Alvorada" para minúsculas não lê como estilo,
   lê como defeito de dado. O marcador monetário brasileiro R$ também é uma
   grafia semântica fixa e nunca pode virar r$. Vale só para o valor renderizado —
   nunca para o rótulo, a legenda ou o cabeçalho que o acompanham. */

.text-proper-name,
.text-currency {
    text-transform: none;
}


/* SELEÇÃO DE TEXTO — ATÉ O REALCE DE SELEÇÃO É DA MARCA */

::selection {
    background: var(--color-palette-primary);
    color: var(--color-text-on-dark);
}


/* CURSOR DE DIGITAÇÃO — O CARET ACOMPANHA A COR PRIMÁRIA DA MARCA */

input, textarea {
    caret-color: var(--color-palette-primary);
}


/* MOVIMENTO REDUZIDO — QUEM PEDE MENOS MOVIMENTO RECEBE A INTERFACE INTEIRA
   PARADA: TODA TRANSIÇÃO E ANIMAÇÃO COLAPSA PARA UM INSTANTE. */

@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ------------------------------------------------------------------------------ */