/* -------------------------------------------------------------------------
   VARIABLES ET THÈMES (DESIGN TOKENS)
------------------------------------------------------------------------- */
:root {
    --bg: #0b0f14;
    --surface: #121821;
    --surface-2: #0f141c;
    --text: #e6edf3;
    --muted: #9fb0c3;
    --brand: #5b9cff;
    --brand-2: #8a5bff;
    --ring: 0 0 0 3px rgba(91, 156, 255, 0.35);
    --radius: 14px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --cta-bg: #ffffff;
    --cta-text: #0b1220;
    --main-blue: #001150;
    color-scheme: dark light;
}

/* Thème sombre via attribut data-theme */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0f14;
    --surface: #121821;
    --surface-2: #0f141c;
    --text: #e6edf3;
    --muted: #9fb0c3;
    --brand: #5b9cff;
    --brand-2: #8a5bff;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --cta-bg: #ffffff;
    --cta-text: #0b1220;
}

/* Thème clair via attribut data-theme */
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f6fa;
    --surface: #eef0f6;
    --surface-2: #ffffff;
    --text: #0b1220;
    --muted: #516170;
    --brand: #2b6cff;
    --brand-2: #7b35ff;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
    --cta-bg: #0b1220;
    --cta-text: #ffffff;
}

/* -------------------------------------------------------------------------
   RESET ET BASE HTML
------------------------------------------------------------------------- */
* { 
    box-sizing: border-box; 
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.5; /* Optionnel : pour une meilleure lisibilité par défaut */
}