/* Pilaris, 2026-09-29. Subconjunto literal de referencias/marca/tokens/
 * colors.css, fonts.css, typography.css, shape.css e elevation.css.
 * Fontes carregadas pelo layout. Sem @import. Tema escuro: DESIGN.md, tokens.color.dark-ui.
 * Seletores conferidos no Krayin 2.2.0; evidencias em worker-01-notas.md.
 */
:root {
    --blue-50: #EEF4FF;
    --blue-300: #79A8FF;
    --blue-600: #0B63E6;
    --blue-700: #0A47B8;
    --white: #FFFFFF;
    --neutral-100: #EEF1F6;
    --neutral-350: #7E8CA3;
    --neutral-400: #94A0B4;
    --neutral-500: #64708A;
    --success-ink: #15803D;
    --warning-ink: #B45309;
    --danger: #EF4444;
    --danger-ink: #B91C1C;
    --text-on-dark-muted: rgba(255,255,255,.9);
    --font-display: "Outfit",system-ui,sans-serif;
    --font-body: "Poppins",system-ui,sans-serif;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --radius-control: 12px;
    --border-width-control: 1.5px;
    --focus-ring-shadow: 0 0 0 4px rgba(11,99,230,.12);
    --focus-ring-shadow-danger: 0 0 0 4px rgba(239,68,68,.10);
    --shadow-brand: 0 4px 14px rgba(11,99,230,.28);
    --shadow-none: none;

    /* Tema escuro de interface: DESIGN.md, tokens.color.dark-ui (2026-09-30). */
    --blue-900: #08122E;
    --dark-page: var(--blue-900);
    --dark-surface: #0D1A3F;
    --dark-raised: #15244F;
    --dark-divider: rgba(255,255,255,.12);
    --dark-control: var(--neutral-350);
    --dark-text: var(--white);
    --dark-text-soft: rgba(255,255,255,.72);
    --dark-link: var(--blue-300);

    /* Variavel do proprio Krayin, aponta para o token canonico. */
    --brand-color: var(--blue-600);
}

body, body.font-inter, .font-inter {
    font-family: var(--font-body);
}

/* Peso calibrado em 2026-09-30 (Vinicius: "fontes densas com peso excessivo").
 * Outfit so em titulo, botao e numero, e um degrau abaixo do padrao do Krayin:
 * o Outfit desenha mais pesado que o Inter no mesmo peso. Rotulo de campo fica
 * em Poppins 500, nao em Outfit. */
h1, h2, h3, h4, h5, h6,
button, .primary-button, .secondary-button, .transparent-button,
.text-2xl.font-semibold, .text-xl.font-semibold, .text-xl.font-bold,
.text-3xl.font-bold {
    font-family: var(--font-display);
}

h1, h2, h3, h4, h5, h6,
.text-xl.font-bold, .text-2xl.font-bold, .text-3xl.font-bold { font-weight: var(--fw-semibold); }
button, .primary-button, .secondary-button, .transparent-button {
    font-weight: var(--fw-semibold);
}

label { font-family: var(--font-body); font-weight: var(--fw-medium); }
.font-semibold:not(h1, h2, h3, h4, h5, h6, button, .text-xl, .text-2xl, .text-3xl) { font-weight: var(--fw-medium); }

/* Metricas do painel: text-xl font-bold. Mantem o tamanho, peso 700. */
p.text-xl.font-bold, p.text-3xl.font-bold {
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

input, textarea, select { font-family: var(--font-body); }

/* Mantem h-10: o lockup 1265x260 ocupa ~195x40, sem o limite de 110px. */
#app img.h-10[src$="/pilaris/logo-v3.svg"],
#app img.h-10[src$="/pilaris/logo-dark-v3.svg"] {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.primary-button {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
    border-radius: var(--radius-control);
    color: var(--white);
    box-shadow: var(--shadow-brand);
}

.primary-button:hover:not(:disabled) {
    background-color: var(--blue-700);
    border-color: var(--blue-700);
    opacity: 1;
}

.primary-button:focus:not(:disabled) {
    opacity: 1;
    box-shadow: var(--focus-ring-shadow);
}

.primary-button:active:not(:disabled) { box-shadow: var(--shadow-none); }

.primary-button:disabled {
    background-color: var(--neutral-100);
    border-color: var(--neutral-100);
    color: var(--neutral-400);
    box-shadow: var(--shadow-none);
}

/* .border existe nos controles nativos; o campo de preco usa uma borda
 * no wrapper .focus-within:border-gray-400, nunca no input interno. */
#app :is(input, textarea, select).border,
#app div.focus-within\:border-gray-400 {
    border-width: var(--border-width-control);
    border-color: var(--neutral-350);
    border-radius: var(--radius-control);
}

#app :is(input, textarea, select).border:focus,
#app div.focus-within\:border-gray-400:focus-within {
    border-color: var(--blue-600);
    box-shadow: var(--focus-ring-shadow);
}

#app :is(input, textarea, select, div).\!border-red-600,
#app :is(input, textarea, select).border-red-500 {
    border-color: var(--danger) !important;
}

#app :is(input, textarea, select, div).\!border-red-600:focus-within,
#app :is(input, textarea, select).border-red-500:focus {
    box-shadow: var(--focus-ring-shadow-danger);
}

/* Texto auxiliar: nao escurecer o texto claro do modo escuro. */
html:not(.dark) .text-gray-400,
html:not(.dark) .text-gray-500 {
    color: var(--neutral-500);
}

html:not(.dark) .\!text-gray-500 { color: var(--neutral-500) !important; }
.dark .text-gray-500 { color: var(--text-on-dark-muted); }
.dark .\!text-gray-500 { color: var(--text-on-dark-muted) !important; }
input::placeholder, textarea::placeholder { color: var(--neutral-500); }
.dark input::placeholder, .dark textarea::placeholder { color: var(--text-on-dark-muted); }

/* O rodape salvo no banco tem style="color: #FB8500". Sobrescrita visual
 * escopada ao link existente; nao altera o texto nem a chave do banco. */
#app .border-t a[href="https://agenciapilaris.com.br"] {
    color: var(--blue-600) !important;
}

/* Tintas semanticas so no claro. No dark, preservar as cores do Krayin
 * sem acrescentar fundos atras do texto. Icones preservam icomoon. */
html:not(.dark) .text-green-500,
html:not(.dark) .text-green-600 { color: var(--success-ink); }
html:not(.dark) .text-red-500,
html:not(.dark) .text-red-600 { color: var(--danger-ink); }
html:not(.dark) .text-orange-600,
html:not(.dark) .text-orange-800,
html:not(.dark) .text-orange-900,
html:not(.dark) .text-yellow-900 {
    color: var(--warning-ink);
}

/* #0B63E6 / gray-900 = 3.33:1, / gray-950 = 3.78:1.
 * #79A8FF passa com 7.48:1 e 8.49:1. Troca so tinta, nao --brand-color. */
.dark .text-brandColor,
.dark .dark\:text-brandColor,
.dark .hover\:text-brandColor:hover,
.dark .peer:checked ~ .peer-checked\:text-brandColor {
    color: var(--blue-300);
}
.dark .\!text-brandColor,
.dark .peer:checked ~ .peer-checked\:\!text-brandColor,
.dark #app .border-t a[href="https://agenciapilaris.com.br"] {
    color: var(--blue-300) !important;
}

/* Tambem protege texto-brandColor dentro de botoes de fundo azul. */
.dark .primary-button,
.dark .primary-button .text-brandColor,
.dark .primary-button .\!text-brandColor {
    color: var(--white) !important;
}
.dark .primary-button:disabled { color: var(--neutral-400) !important; }

@media (prefers-reduced-motion: reduce) {
    .primary-button, .secondary-button, .transparent-button,
    #app :is(input, textarea, select).border {
        transition: none;
    }
}


/* ============ Logo por tema (2026-09-30) ============
 * O header e o menu mobile trazem os dois logos (patches/ui-pilaris.php).
 * O escuro nasce com style="display:none" para instancia sem este CSS. */
.pl-logo-dark { display: none !important; }
.dark .pl-logo-light { display: none !important; }
.dark .pl-logo-dark { display: inline-block !important; }

/* ============ Tema escuro marinho (DESIGN.md, tokens.color.dark-ui) ============
 * Substitui os cinzas do Tailwind usados pelo Krayin no modo escuro. */
.dark body,
.dark .dark\:bg-gray-950,
.dark .dark\:bg-slate-950 { background-color: var(--dark-page) !important; }

.dark header,
.dark .dark\:bg-gray-900,
.dark .dark\:\!bg-gray-900 { background-color: var(--dark-surface) !important; }

.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-700,
.dark .dark\:hover\:bg-gray-950:hover,
.dark .dark\:hover\:bg-gray-900:hover,
.dark .dark\:hover\:bg-gray-800:hover { background-color: var(--dark-raised) !important; }

.dark .dark\:border-gray-900,
.dark .dark\:border-gray-800,
.dark .dark\:border-gray-700,
.dark .dark\:border-gray-600,
.dark .dark\:divide-gray-800 > * + *,
.dark .dark\:divide-gray-700 > * + * { border-color: var(--dark-divider) !important; }

/* Campo no escuro: borda com 3:1 (dark-control), fundo elevado. */
.dark #app :is(input, textarea, select).border,
.dark #app div.focus-within\:border-gray-400 {
    border-color: var(--dark-control);
    background-color: var(--dark-raised);
}
.dark #app :is(input, textarea, select).border:focus,
.dark #app div.focus-within\:border-gray-400:focus-within { border-color: var(--dark-link); }

.dark .dark\:text-gray-300,
.dark .dark\:\!text-gray-300,
.dark .dark\:text-gray-400 { color: var(--dark-text-soft) !important; }
.dark .dark\:text-white { color: var(--dark-text) !important; }
.dark .dark\:ring-offset-gray-800 { --tw-ring-offset-color: var(--dark-surface); }

/* Calendario (flatpickr) no escuro. */
.dark .flatpickr-calendar { background: var(--dark-surface); border-color: var(--dark-divider); box-shadow: none; }