/* ==========================================================================
   Tokens compartilhados (única fonte de cor, tipografia, raio, sombra, foco).
   Regras de componente ficam na folha da área (ui-base.css, admin-*.css,
   company.css, public-*.css). Ordem das camadas: tokens < base < vendor <
   components < page. Uma folha que declara @layer vence a anterior sem
   precisar de prefixo de escopo nem de !important.
   ========================================================================== */
@layer tokens, base, vendor, components, page;

:root {
    /* Tipografia */
    --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Pesos: Inter variável (400–700). Títulos em semibold (580), nunca acima de bold. */
    --ui-weight-regular: 400;
    --ui-weight-medium: 500;
    --ui-weight-semibold: 580;
    --ui-weight-bold: 640;

    /* Escala de títulos e textos pequenos. Títulos sempre em semibold; bold
       fica só para números de destaque do admin. Nada abaixo de 12px em
       rótulos e metadados. */
    --ui-title-xl: clamp(28px, 4.2vw, 40px);
    --ui-title-lg: clamp(24px, 3vw, 30px);
    --ui-title-md: clamp(19px, 2vw, 22px);
    --ui-title-sm: 17px;
    --ui-text-sm: 13px;
    --ui-text-xs: 12px;
    --ui-leading-title: 1.2;
    --ui-tracking-title: -.015em;

    /* Marca */
    --ui-primary: #0f766e;
    --ui-primary-hover: #115e59;
    --ui-primary-soft: #e8f5f2;
    --ui-primary-border: #c5e6df;
    --ui-primary-ring: rgb(15 118 110 / 18%);
    --ui-accent: #967324;
    --ui-accent-soft: #fbf4e3;

    /* Superfícies e texto */
    --ui-bg: #f4f7f7;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f7fafa;
    --ui-text: #1d2928;
    --ui-muted: #566563;
    --ui-border: #dbe4e2;
    --ui-border-strong: #b6c6c3;

    /* Escala neutra (substitui slate/gray do Tailwind nas folhas próprias) */
    --ui-gray-50: #f7fafa;
    --ui-gray-100: #edf2f1;
    --ui-gray-200: #dbe4e2;
    --ui-gray-300: #b6c6c3;
    --ui-gray-400: #889895;
    --ui-gray-500: #566563;
    --ui-gray-700: #364442;
    --ui-gray-900: #1d2928;

    /* Estados */
    --ui-danger: #b42318;
    --ui-danger-soft: #fdecea;
    --ui-success: #237044;
    --ui-success-soft: #e6f3ea;
    --ui-info: #245a8d;
    --ui-info-soft: #e8f0f8;
    --ui-warning: #92620f;
    --ui-warning-soft: #fdf4e3;
    --ui-danger-hover: #8f1c12;
    --ui-success-border: #bfdcc8;
    --ui-danger-border: #f1c2bd;
    --ui-info-border: #c5d8ec;
    --ui-warning-border: #ecd6a8;

    /* Forma */
    --ui-radius-xs: 4px;
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-radius-pill: 999px;
    --ui-shadow-sm: 0 2px 8px rgb(16 42 40 / 5%);
    --ui-shadow-md: 0 8px 24px rgb(16 42 40 / 8%);
    --ui-shadow-lg: 0 18px 48px rgb(16 42 40 / 13%);
    --ui-control-height: 44px;
    --ui-control-height-sm: 36px;
    --ui-focus-ring: 0 0 0 3px var(--ui-primary-ring);

    /* Breakpoints de contrato (CSS não aceita var() em @media): 480 / 768 / 1024 / 1280 */
}

@layer tokens {
    /* Áreas pública e da empresa: Quicksand, com pesos calibrados para ela
       (é naturalmente leve; texto corrido em 500 para manter a leitura).
       Acima de 640 a Quicksand fica "gorda": títulos em 600, <strong> em
       560/600, nunca 700. O login do admin (body.vsadmin.login-page) fica
       na Inter, como o resto do admin. */
    :where(body.public-app, body.public-results, body.public-gallery-page, body.login-page:not(.vsadmin), body.company-dashboard, body.company-picker-page, body.account-recovery) {
        --ui-font: Quicksand, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
        --ui-weight-regular: 500;
        --ui-weight-medium: 560;
        --ui-weight-semibold: 600;
        --ui-weight-bold: 640;
        font-weight: var(--ui-weight-regular);
    }
    :where(body.account-recovery, body.public-app, body.public-results, body.public-gallery-page, body.login-page, body.company-dashboard, body.company-picker-page, body.vsadmin) {
        font-family: var(--ui-font);
        color: var(--ui-text);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }
    :where(.account-recovery, .public-app, .public-results, .public-gallery-page, .login-page, .company-dashboard, .company-picker-page, .vsadmin) :where(button, input, textarea, select) {
        font: inherit;
    }
    :where(.account-recovery, .public-app, .public-results, .public-gallery-page, .login-page, .company-dashboard, .company-picker-page, .vsadmin) :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid var(--ui-accent);
        outline-offset: 3px;
    }
}
/* [hidden] e movimento reduzido ficam fora das camadas para vencer qualquer folha. */
:where(.account-recovery, .public-app, .public-results, .public-gallery-page, .login-page, .company-dashboard, .company-picker-page, .vsadmin) [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    :where(.account-recovery, .public-app, .public-results, .public-gallery-page, .login-page, .company-dashboard, .company-picker-page, .vsadmin) *,
    :where(.account-recovery, .public-app, .public-results, .public-gallery-page, .login-page, .company-dashboard, .company-picker-page, .vsadmin) *::before,
    :where(.account-recovery, .public-app, .public-results, .public-gallery-page, .login-page, .company-dashboard, .company-picker-page, .vsadmin) *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}