/**
 * Design Tokens e Custom Properties (CSS Variables) do portal SINDSEP Acaraú.
 * Mapeados diretamente do TailwindCSS do site de referência.
 */

:root {
    /* Paleta de Cores (Verde Institucional) */
    --color-primary: #004d27;
    --color-primary-container: #006837;
    --color-primary-fixed: #9ef6b6;
    --color-primary-fixed-dim: #83d99c;

    --color-secondary: #006d40;
    --color-secondary-container: #7afbb1;
    --color-secondary-fixed: #7afbb1;
    --color-secondary-fixed-dim: #5cde97;

    --color-tertiary: #124d2c;
    --color-tertiary-container: #2e6542;
    --color-tertiary-fixed: #b4f0c4;
    --color-tertiary-fixed-dim: #99d4a9;

    /* Superfícies e Fundos */
    --color-background: #f7faf8;
    --color-surface: #f7faf8;
    --color-surface-bright: #f7faf8;
    --color-surface-dim: #d7dbd9;
    --color-surface-container: #ebefed;
    --color-surface-container-low: #f1f4f2;
    --color-surface-container-high: #e6e9e7;
    --color-surface-container-highest: #e0e3e1;
    --color-surface-container-lowest: #ffffff;

    /* Outlines, Bordas e Erros */
    --color-outline: #6f7a70;
    --color-outline-variant: #bec9be;
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;

    /* Cores de Contraste (Textos) */
    --color-on-primary: #ffffff;
    --color-on-secondary: #ffffff;
    --color-on-tertiary: #ffffff;
    --color-on-background: #181c1b;
    --color-on-surface: #181c1b;
    --color-on-surface-variant: #3f4940;
    --color-on-primary-container: #8ee4a6;
    --color-on-secondary-container: #007444;

    /* Tipografia */
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-heading: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Espaçamento e Largura */
    --container-max: 1200px;
    --spacing-margin-desktop: 48px;
    --spacing-margin-mobile: 16px;
    --spacing-gutter: 24px;
    --spacing-base: 8px;
    --spacing-stack-sm: 8px;
    --spacing-stack-md: 16px;
    --spacing-stack-lg: 32px;

    /* Bordas */
    --border-radius-default: 2px;
    --border-radius-lg: 4px;
    --border-radius-xl: 8px;
    --border-radius-full: 12px;

    /* Sombras (Shadows) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px -5px rgba(0, 77, 39, 0.1);
}