:root {
    /* Neutros fixos. Cores de marca e derivados vêm de config/tema.php (--app-*). */
    --app-dark: #0b1220;
    --app-title: var(--app-text-title, #1a1d23);
    --app-text: #2a2f38;
    --app-muted: #6b7280;
    --app-placeholder: var(--app-text-placeholder, #9aa1ad);
    --app-label: var(--app-text-label, #374151);
    --app-border: #d7dbe3;
    --app-surface: #ffffff;
    --app-surface-soft: #f7f8fa;
    --app-on-dark: #ffffff;
    --app-primary: #1B3A5C;
    --app-primary-dark: #12283F;

    /*
     * Camadas tonais:
     * página (bg) > tela (canvas cinza) > cartão (branco) > controle (surface-2).
     */
    --app-canvas: #F1F2F4;
    --surface-2: color-mix(in srgb, var(--app-canvas) 82%, var(--app-border));
    --surface-3: color-mix(in srgb, var(--app-canvas) 70%, var(--app-border));
    --line: color-mix(in srgb, var(--app-border) 42%, transparent);
    --line-strong: color-mix(in srgb, var(--app-border) 70%, transparent);

    /* Tintas de interação, sempre derivadas do tema ativo. */
    --tint-hover: color-mix(in srgb, var(--app-title) 5%, transparent);
    --tint-active: color-mix(in srgb, var(--app-title) 8%, transparent);
    --tint-primary: color-mix(in srgb, var(--app-primary, #1B3A5C) 10%, transparent);
    --tint-primary-strong: color-mix(in srgb, var(--app-primary, #1B3A5C) 16%, transparent);
    --ring: 0 0 0 3px color-mix(in srgb, var(--app-primary, #1B3A5C) 20%, transparent);

    --fs-11: 0.6875rem;
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-15: 0.9375rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-38: 2.375rem;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;

    /* Raios seguem o tema, com piso para o kit não ficar com canto reto. */
    --r-sm: max(10px, var(--app-radius-sm, 10px));
    --r-md: max(14px, var(--app-radius, 16px));
    --r-lg: max(20px, var(--app-radius-lg, 24px));
    --r-xs: max(8px, calc(var(--r-sm) * .7));
    --r-xl: calc(var(--r-lg) + 6px);
    --r-btn: var(--tema-button-radius, 10px);
    --r-control: var(--tema-button-radius, 10px);
    --r-pill: 999px;

    --control-h: 50px;
    --control-h-sm: 40px;

    --shadow-soft: 0 1px 2px rgba(11, 18, 32, .04), 0 10px 28px -14px rgba(11, 18, 32, .16);
    --shadow-lift: 0 2px 4px rgba(11, 18, 32, .04), 0 18px 40px -18px rgba(11, 18, 32, .22);
    --shadow-frame: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 30px 80px -40px rgba(11, 18, 32, .28);
    --shadow-pop: 0 12px 40px -8px rgba(11, 18, 32, .18), 0 2px 8px rgba(11, 18, 32, .06);
    --shadow-card-hover: var(--shadow-lift);
    --shadow-none: none;

    /* Movimento */
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 420ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --ease: var(--dur) var(--ease-out);

    --font: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Shell */
    --sidebar-w: 272px;
    --sidebar-w-collapsed: 92px;
    --frame-gap: 0px;
    --mobilebar-h: 60px;
    --topbar-h: var(--mobilebar-h);
    --content-max: 1320px;
    --content-pad: 36px;
}