/*
 * Design tokens globais da plataforma Só Somar.
 *
 * Este arquivo contém apenas decisões realmente compartilhadas. Dimensões de
 * um componente específico (por exemplo, a largura mínima de uma tabela) ficam
 * no CSS do próprio componente. Variáveis calculadas em tempo de execução
 * também permanecem locais e não entram neste catálogo.
 *
 * As 14 cores editáveis pelo usuário são mantidas com os nomes históricos em
 * app.css. Esses nomes fazem parte do contrato dos temas personalizados já
 * salvos no banco e não podem ser renomeados sem uma migração de dados.
 */

/* Uma única família com pesos reais substitui as antigas famílias por peso. */
@font-face {
    font-family: "Google Sans";
    src: url("../assets/fonts/GoogleSans-Regular.a93fc7148f22.ttf");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans";
    src: url("../assets/fonts/GoogleSans-Medium.90b1b6ed369a.ttf");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans";
    src: url("../assets/fonts/GoogleSans-SemiBold.85ccda912582.ttf");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans";
    src: url("../assets/fonts/GoogleSans-Bold.6da6853a331d.ttf");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Tipografia: nove degraus substituem dezenas de valores quase iguais. */
    --font-sans: "Google Sans", Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-display: clamp(1.625rem, 4vw, 3.125rem);

    /* Espaçamento: escala baseada em 4 px com saltos maiores para seções. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Ícones: tamanhos visuais, separados da escala de espaçamento. */
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.5rem;
    --icon-xl: 2rem;

    /* Controles: alturas consistentes para botões, inputs e selects. */
    --control-sm: 2.25rem;
    --control-md: 2.75rem;
    --control-lg: 3rem;

    /* Bordas e raios. */
    --border-width: 1px;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.875rem;
    --radius-pill: 999px;

    /* Elevação. As sombras usam preto translúcido em todos os temas. */
    --shadow-sm: 0 0.25rem 0.75rem rgb(0 0 0 / 0.1);
    --shadow-lg: 0 0.875rem 2.125rem rgb(0 0 0 / 0.24);

    /* Movimento. Valores excepcionais de animações encadeadas ficam locais. */
    --motion-fast: 160ms;
    --motion-normal: 220ms;
    --motion-slow: 340ms;

    /* Camadas semânticas. Ajustes relativos usam calc() no componente. */
    --layer-header: 10;
    --layer-mobile-bar: 20;
    --layer-sidebar: 25;
    --layer-dropdown: 40;
    --layer-popover: 80;
    --layer-modal: 120;

    /* Estados de transparência reutilizados. */
    --opacity-disabled: 0.55;
    --opacity-muted: 0.68;
    --opacity-overlay: 0.45;

    /* Dimensões estruturais compartilhadas entre layout e responsividade. */
    --topbar-height: 4.875rem;
    --sidebar-width: 18.75rem;
    --sidebar-collapsed: 5.125rem;
    --content-max: 82.5rem;
}

/*
 * Breakpoints oficiais (mantidos literais porque @media não aceita var()):
 *   47.5rem  (760 px)  — mobile;
 *   61.25rem (980 px)  — formulário/tablet intermediário;
 *   82.5rem  (1320 px) — desktop intermediário e limite principal de conteúdo.
 * Breakpoints adicionais só devem existir quando um componente realmente os
 * exigir e devem ser documentados no arquivo daquele componente.
 */