:root {
    /* Marca */
    --sopc-navy: #031B34;
    --sopc-gold: #F3C350;

    /* Superfícies */
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-soft: #F1F5F9;
    --color-border: #E2E8F0;

    /* Texto */
    --color-text-primary: #0F172A;
    --color-text-secondary: #475569;
    --color-text-muted: #64748B;

    /* Ações */
    --color-primary: var(--sopc-navy);
    --color-primary-hover: #06284A;
    --color-accent: var(--sopc-gold);
    --color-accent-hover: #E3B33F;

    /* Tipografia */
    --font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Espaçamento */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Forma */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);

    /* Layout */
    --container-max: 1280px;
    --content-max: 1180px;

    /* Camadas */
    --z-base: 0;
    --z-header: 100;
    --z-sidebar: 200;
    --z-dropdown: 300;
    --z-modal: 500;
    --z-toast: 700;
}

[data-theme="dark"] {
    --color-bg: #0B1220;
    --color-surface: #111827;
    --color-surface-soft: #182235;
    --color-border: #263449;

    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #94A3B8;

    /* Ações mantêm identidade entre temas */
    --color-primary: var(--sopc-navy);
    --color-primary-hover: #0A3157;
    --color-accent: var(--sopc-gold);
    --color-accent-hover: #E3B33F;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30);
}

/* Breakpoints de referência:
   mobile  < 768px
   tablet  768–1023px
   desktop >= 1024px
*/