/* ============================================================
   Zeno × Litis — ponte
   ============================================================
   Todo o acoplamento entre o design system Zeno (zeno.css, portátil) e este
   projeto mora aqui. `zeno.css` não sabe que o Litis existe; este arquivo não
   viaja para outros projetos.

   Escopo: `html[data-produto="cliente"]`, atributo injetado por
   `serve_index()` (backend/main.py) quando o Host bate em CLIENTE_HOST. Fora
   do produto cliente-final nenhuma regra daqui casa, e o app do escritório
   segue navy/âmbar sem mudança.

   Estratégia: `styles.css` consome `var(--color-*)` 1157× e os estilos inline
   do index.html usam os mesmos tokens. Redefinir os tokens no escopo repinta
   quase tudo; a seção "Forma" só cobre o que é estrutural (altura de
   controle, raio hardcoded, sombras fortes, vidro fosco).
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens — claro
   ------------------------------------------------------------ */
html[data-produto="cliente"] {
    /* Marca. O Zeno é monocromático: não há segunda cor de destaque, então
       --color-accent (âmbar do escritório) também vira roxo. */
    --color-primary: var(--zn-accent);
    --color-primary-hover: var(--zn-accent-hover);
    --color-primary-dark: var(--zn-accent-active);
    --color-primary-light: var(--zn-accent-soft);
    --color-primary-soft: var(--zn-accent-soft);
    --color-on-primary: var(--zn-on-accent);
    --color-accent: var(--zn-accent);
    --color-accent-hover: var(--zn-accent-hover);
    --color-accent-light: var(--zn-accent-soft);

    /* Superfícies */
    --color-bg: var(--zn-bg);
    --color-card: var(--zn-surface);
    --color-surface: var(--zn-surface);
    --color-bg-primary: var(--zn-surface);
    --color-bg-input: var(--zn-surface);
    --color-bg-secondary: var(--zn-surface-sunken);
    --color-bg-tertiary: var(--zn-bg-subtle);
    --color-bg-subtle: var(--zn-surface-sunken);
    --color-border: var(--zn-border);
    --color-border-light: var(--zn-border);

    /* Texto */
    --color-text: var(--zn-text);
    --color-text-primary: var(--zn-text);
    --color-text-secondary: var(--zn-text-secondary);
    --color-text-tertiary: var(--zn-text-muted);
    --color-muted: var(--zn-text-muted);
    --color-text-muted: var(--zn-text-muted);
    --color-placeholder: var(--zn-text-muted);

    /* Semânticos. O Zeno só define 500 + 50; hover escurece via
       color-mix, bg é o tom 50. */
    --color-danger: var(--zn-danger-500);
    --color-danger-hover: color-mix(in srgb, var(--zn-danger-500) 82%, black);
    --color-danger-light: var(--zn-danger-50);
    --color-danger-bg: var(--zn-danger-50);
    --color-error: var(--zn-danger-500);
    --color-warning: var(--zn-warning-500);
    --color-warning-hover: color-mix(in srgb, var(--zn-warning-500) 82%, black);
    --color-warning-light: var(--zn-warning-50);
    --color-warning-bg: var(--zn-warning-50);
    --color-success: var(--zn-success-500);
    --color-success-hover: color-mix(in srgb, var(--zn-success-500) 82%, black);
    --color-success-light: var(--zn-success-50);
    --color-success-bg: var(--zn-success-50);
    --color-info: var(--zn-info-500);
    --color-info-light: var(--zn-info-50);
    --color-info-bg: var(--zn-info-50);

    /* Desabilitado */
    --color-disabled-bg: var(--zn-neutral-300);
    --color-disabled-fg: var(--zn-neutral-50);

    /* Aliases de estilo inline do index.html */
    --border: var(--zn-border);
    --danger: var(--zn-danger-500);
    --success: var(--zn-success-500);
    --surface-muted: var(--zn-surface-sunken);

    /* Raio. O Zeno usa a mesma escala do projeto; explicitar mantém o
       arquivo autocontido se um dos dois mudar. */
    --radius-sm: var(--zn-radius-sm);
    --radius-md: var(--zn-radius-md);
    --radius-lg: var(--zn-radius-lg);
    --radius-xl: var(--zn-radius-xl);
    --radius-full: var(--zn-radius-full);

    /* Tipografia. Regra 4 do Zeno: Inter para tudo, Roboto só para textos
       complementares, nada de terceira família — daí a serifada
       (--font-display, Newsreader) também virar Inter. Mono fica: é código /
       número tabular, não uma família de marca. */
    --font-family: var(--zn-font-sans);
    --font-display: var(--zn-font-sans);

    /* Elevação: fios, não sombras (regra 6). */
    --shadow-sm: none;
    --shadow-md: var(--zn-shadow-sm);
    --shadow-lg: var(--zn-shadow-md);
    --shadow-xl: var(--zn-shadow-lg);

    /* --space-* não é remapeado de propósito: já é escala de 4px em rem,
       compatível na prática com a base-8 do Zeno. Trocar moveria layout em
       toda a tela sem ganho visual. Idem --modulo-cor-*, que é codificação
       por categoria e não marca. */
}

/* ------------------------------------------------------------
   2. Tokens — escuro
   ------------------------------------------------------------
   zeno.css já troca os --zn-* sob [data-theme="dark"], então a maior parte
   do bloco acima segue sozinha. Aqui ficam só os semânticos, que no Zeno não
   têm variante escura: o tom 50 (quase branco) como fundo de alerta ficaria
   ilegível sobre #202020. */
html[data-produto="cliente"][data-theme="dark"] {
    --color-danger-hover: color-mix(in srgb, var(--zn-danger-500) 75%, white);
    --color-warning-hover: color-mix(in srgb, var(--zn-warning-500) 75%, white);
    --color-success-hover: color-mix(in srgb, var(--zn-success-500) 75%, white);

    --color-danger-light: color-mix(in srgb, var(--zn-danger-500) 22%, var(--zn-surface));
    --color-danger-bg: color-mix(in srgb, var(--zn-danger-500) 22%, var(--zn-surface));
    --color-warning-light: color-mix(in srgb, var(--zn-warning-500) 22%, var(--zn-surface));
    --color-warning-bg: color-mix(in srgb, var(--zn-warning-500) 22%, var(--zn-surface));
    --color-success-light: color-mix(in srgb, var(--zn-success-500) 22%, var(--zn-surface));
    --color-success-bg: color-mix(in srgb, var(--zn-success-500) 22%, var(--zn-surface));
    --color-info-light: color-mix(in srgb, var(--zn-info-500) 22%, var(--zn-surface));
    --color-info-bg: color-mix(in srgb, var(--zn-info-500) 22%, var(--zn-surface));

    --color-disabled-bg: var(--zn-neutral-700);
    --color-disabled-fg: var(--zn-neutral-500);
}

/* ------------------------------------------------------------
   3. Forma — só o que o token não alcança
   ------------------------------------------------------------ */

html[data-produto="cliente"] body {
    -webkit-font-smoothing: antialiased;
}

/* 3.1 Foco visível e de marca (regra de acessibilidade do Zeno). */
html[data-produto="cliente"] :focus-visible {
    outline: none;
    box-shadow: var(--zn-focus-ring);
}

/* 3.2 Controles a 40px, raio 8px.
   .proposal-btn traz raio 12px e padding em rem hardcoded, e sobe 1px no
   hover — o Zeno pede movimento discreto e elevação por fio, não por salto. */
html[data-produto="cliente"] .proposal-btn {
    min-height: var(--zn-control-height);
    border-radius: var(--zn-radius-md);
    padding: 0 var(--zn-space-5);
    font-size: var(--zn-text-sm);
    font-weight: var(--zn-weight-medium);
    transition: background var(--zn-duration-base) var(--zn-ease),
        border-color var(--zn-duration-base) var(--zn-ease),
        color var(--zn-duration-base) var(--zn-ease);
}
html[data-produto="cliente"] .proposal-btn:hover:not(:disabled) {
    transform: none;
}
html[data-produto="cliente"] .proposal-btn--sm {
    min-height: var(--zn-control-height-sm);
    padding: 0 var(--zn-space-4);
    border-radius: var(--zn-radius-sm);
}

html[data-produto="cliente"] .btn {
    min-height: var(--zn-control-height);
    font-weight: var(--zn-weight-medium);
}

html[data-produto="cliente"] input:not([type="checkbox"]):not([type="radio"]),
html[data-produto="cliente"] select {
    min-height: var(--zn-control-height);
}
html[data-produto="cliente"] input,
html[data-produto="cliente"] select,
html[data-produto="cliente"] textarea {
    border-color: var(--zn-border-strong);
    border-radius: var(--zn-radius-md);
    font-family: var(--zn-font-sans);
}

/* 3.3 Gate de entrada.
   O login do escritório é vidro fosco sobre um gradiente navy→âmbar com
   sombra pesada — o oposto das regras 2 e 6 do Zeno (fundo claro, elevação
   por fio). Aqui vira superfície branca sobre o fundo da marca. */
html[data-produto="cliente"] .login-overlay {
    background: var(--zn-bg);
}
html[data-produto="cliente"] .login-card--cliente {
    --login-card-surface: var(--zn-surface);
    background: var(--zn-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: var(--zn-hairline) solid var(--zn-border);
    border-radius: var(--zn-radius-lg);
    box-shadow: var(--zn-shadow-md);
}
/* A logo completa substitui o wordmark textual; o manual pede 90×25px de
   mínimo e proíbe deformar, então só a largura é fixada. 108px dá ~30px de
   altura: o mesmo que o <h1> que ela substituiu, para o cabeçalho não roubar
   altura do formulário (que rola quando não cabe). */
html[data-produto="cliente"] .login-card--cliente .login-card__icon {
    width: 108px;
    height: auto;
    max-width: 60%;
    margin: 0 auto var(--zn-space-1);
    display: block;
    border-radius: 0;
}

/* Os campos são itens diretos do grid de duas colunas do formulário, e item
   de grid nasce com `min-width: auto` = min-content. Um <input> sem `size`
   tem min-content de ~20 caracteres, então dois deles lado a lado estouram
   os 620px do card: barra horizontal, campos cortados à direita, e a barra
   ainda come altura e liga a vertical junto. Só `.cliente-field-row` (o par
   CPF/WhatsApp) tinha o `min-width: 0`; Nome, E-mail e Empresa não. Latente
   com Public Sans, visível com Inter, que é mais larga. */
html[data-produto="cliente"] .login-card--cliente .login-card__field {
    min-width: 0;
}
html[data-produto="cliente"] .login-card--cliente .login-card__field input {
    width: 100%;
    min-width: 0;
}
html[data-produto="cliente"] .login-card--cliente .login-card__subtitle {
    color: var(--zn-text-secondary);
    line-height: var(--zn-leading-relaxed);
}
/* Rótulos, legendas e o campo de código: textos complementares → Roboto
   (regra 4). */
html[data-produto="cliente"] .login-card--cliente .login-card__field label,
html[data-produto="cliente"] .login-card__hint,
html[data-produto="cliente"] .cliente-field-error,
html[data-produto="cliente"] .legal-footer {
    font-family: var(--zn-font-support);
}
html[data-produto="cliente"] .cliente-field-error {
    color: var(--zn-danger-500);
}
html[data-produto="cliente"] .cliente-codigo {
    font-family: var(--zn-font-support);
    letter-spacing: var(--zn-tracking-wide);
}

/* 3.4 Estado selecionado = accent-soft + borda (mapa de decisão do Zeno).
   O switch de canal pintava a opção ativa de roxo cheio; regra 1 pede um
   único elemento roxo dominante por bloco, e nesse card ele é o CTA. */
html[data-produto="cliente"] .cliente-canal-switch .btn--active {
    background: var(--zn-accent-soft);
    border-color: var(--zn-accent-soft-border);
    color: var(--zn-text-brand);
    font-weight: var(--zn-weight-semibold);
}
html[data-produto="cliente"] .cliente-consent:has(input:checked) {
    background: var(--zn-accent-soft);
    border-color: var(--zn-accent-soft-border);
}

/* 3.5 Rodapé LGPD: era claro sobre o gradiente escuro; agora é fio + texto
   secundário sobre fundo claro. */
html[data-produto="cliente"] .legal-footer--cliente a {
    color: var(--zn-text-secondary);
}
html[data-produto="cliente"] .legal-footer--cliente a:hover {
    color: var(--zn-text-brand);
}

/* 3.6 Painel de valores por verba — o entregável do produto. Card Zeno. */
html[data-produto="cliente"] .enrichment-panel {
    background: var(--zn-surface);
    border: var(--zn-hairline) solid var(--zn-border);
    border-radius: var(--zn-radius-lg);
    box-shadow: var(--zn-shadow-xs);
}