:root {
    /* === TYPOGRAPHY === */

    --font-family-base: TildaSans, sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-xxl: 40px;

    --line-height-base: 1.6;
    --line-height-tight: 1.3;

    /* === SPACING === */

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-xxl: 64px;

    /* === RADIUS === */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* === SHADOW === */

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

    /* === TRANSITIONS === */

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}

[data-theme='light'] {
    /* Brand */
    --color-primary: #0f2a44;
    --color-primary-hover: #1b3f66;

    --color-secondary: #5b6b7c;
    --color-accent: #3b82f6;

        /* === BACKGROUNDS === */
    --color-bg-main: #eef3f8;
    --color-bg-surface: #ffffff;
    --color-bg-muted: #e3edf7;

        /* === TEXT === */
    --color-text-main: #0b1f33;
    --color-text-secondary: #334e68;
    --color-text-muted: #6b7f92;
    --color-text-inverse: #ffffff;

        /* === BORDERS === */
    --color-border: #d6e2ef;
    --color-border-strong: #bcccdc;
}

[data-theme="dark"] {
    --color-text-inverse: #000;

}