/* ============================================================
   MK Haus - Design Tokens
   Variáveis extraídas da identidade visual da marca
   ============================================================ */

:root {
    /* Cores */
    --color-primary: #9F8047;
    --color-primary-hover: #86693A;
    --color-primary-light: #F3EDE3;
    --color-bg: #FFFFFF;
    --color-bg-muted: #FAFAF9;
    --color-text: #1B2325;
    /* 0.6 de opacidade rendia ~4.3:1 sobre --color-bg, abaixo do AA (4.5:1)
       para texto normal; 0.65 sobe para ~5:1 sem escurecer perceptivelmente */
    --color-text-muted: rgba(27, 35, 37, 0.65);
    --color-border: rgba(27, 35, 37, 0.12);
    --color-danger: #C0392B;
    --color-danger-light: #FBEAE8;
    --color-success: #2E7D32;
    --color-success-light: #EAF5EA;

    /* Espaçamento — múltiplos de 4px */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Bordas e sombras — variam com intenção: superfícies planas (listas,
       tabelas) não levam sombra; elevação é reservada para o que precisa
       se destacar (cards de destaque do dashboard, modais) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-none: none;
    --shadow-sm: 0 1px 3px rgba(27, 35, 37, 0.08);
    --shadow-md: 0 4px 16px rgba(27, 35, 37, 0.10);
    --shadow-lg: 0 12px 40px rgba(27, 35, 37, 0.16);

    /* Tipografia — Inter é a família principal (visual próximo de SF Pro);
       a pilha de sistema entra como fallback caso a fonte web não carregue */
    --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.75rem;
    --font-size-xxl: 2.25rem;
    --font-size-display: 2.75rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;

    /* Escala tipográfica semântica: cada papel de texto usa um destes,
       nunca tamanho/peso soltos escolhidos ad-hoc por tela */
    --text-display-size: var(--font-size-display);
    --text-display-weight: var(--font-weight-bold);
    --text-display-tracking: var(--tracking-tight);

    --text-titulo-size: var(--font-size-xl);
    --text-titulo-weight: var(--font-weight-bold);
    --text-titulo-tracking: var(--tracking-tight);

    --text-subtitulo-size: var(--font-size-sm);
    --text-subtitulo-weight: var(--font-weight-regular);

    --text-rotulo-size: var(--font-size-sm);
    --text-rotulo-weight: var(--font-weight-semibold);

    --text-corpo-size: var(--font-size-md);
    --text-corpo-weight: var(--font-weight-regular);

    --text-legenda-size: var(--font-size-xs);
    --text-legenda-weight: var(--font-weight-medium);

    /* Layout */
    --largura-sidebar: 216px;
    --largura-sidebar-recolhida: 72px;
    --altura-header: 64px;

    /* Motion — durações e curvas padronizadas, reaproveitadas por CSS e
       pelas chamadas de Anime.js (ver assets/js/main.js) */
    --transicao-rapida: 0.15s ease;
    --duration-rapida: 150;
    --duration-media: 300;
    --duration-lenta: 500;
    --easing-padrao: cubic-bezier(0.4, 0, 0.2, 1);

    /* Foco — nunca remover o outline sem substituto: todo elemento
       interativo usa este anel visível ao navegar por teclado */
    --focus-ring: 0 0 0 3px var(--color-primary-light), 0 0 0 1px var(--color-primary);
}