/* Design tokens — CV/Portfolio blanc & orange */
:root {
    /* Couleurs de base (clair) */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #1f2937;
    --color-muted: #6b7280;
    --color-border: #efefef;
    --color-accent: #ff6b35;

    /* Variantes d’accent */
    --color-accent-50: #fff4ec;
    --color-accent-100: #ffe4d6;
    --color-accent-200: #ffcfba;
    --color-accent-600: #e55a2b;
    --color-accent-700: #c74d25;

    /* Rayons et ombres */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);

    /* Layout */
    --header-height: 80px;
    --container-max: 1100px;

    /* Espacements */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
}

/* Thème sombre (préférence système par défaut) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1f2937;
        --color-surface: #0e141b;
        --color-text: #e5e7eb;
        --color-muted: #9ca3af;
        --color-border: #0b0f14;
        /* accent inchangé pour la cohérence de marque */
    }
}

/* Thème forcé via data-attribute */
html[data-theme="light"] {
    --color-bg: #ffffff;
    --color-surface: #FFF7F7;
    --color-text: #1f2937;
    --color-muted: #6b7280;
    --color-border: #efefef;
}

html[data-theme="dark"] {
    --color-bg: #1f2937;
    --color-surface: #0e141b;
    --color-text: #e5e7eb;
    --color-muted: #9ca3af;
    --color-border: #0b0f14;
    --color-accent-50: #041D36;
}