/* ==========================================================
   AMBK DESIGN SYSTEM
   ----------------------------------------------------------
   Constantes graphiques globales du site.
   Aucun composant ne doit définir ses propres couleurs.
   ========================================================== */

:root {

    /* ======================================================
       TYPOGRAPHY
       ====================================================== */

    --font-primary: "Segoe UI", Arial, sans-serif;

    /* ======================================================
       LAYOUT
       ====================================================== */

    --container-max-width: 1180px;
    --header-height: 84px;

    /* ======================================================
       BRAND COLORS
       ====================================================== */

    --color-primary: #123f8c;
    --color-primary-hover: #0b2f6d;
    --color-primary-soft: #eaf1ff;

    --color-secondary: #0f766e;
    --color-secondary-soft: #e6f5f3;

    --color-accent: #c28a2c;
    --color-accent-soft: #fff4df;

    /* ======================================================
       BACKGROUNDS
       ====================================================== */

    --color-background-primary: #ffffff;
    --color-background-secondary: #f5f7fb;
    --color-background-elevated: #ffffff;

    /* ======================================================
       TEXT
       ====================================================== */

    --color-text-primary: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-inverted: #ffffff;

    /* ======================================================
       BORDERS
       ====================================================== */

    --color-border: #e3e8ef;
    --color-border-strong: #cbd5e1;

    /* ======================================================
       HEADER
       ====================================================== */

    --color-header-background: rgba(255, 255, 255, 0.92);

    /* ======================================================
       GRADIENTS
       ====================================================== */

    --gradient-hero: linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef4ff 48%,
            #ffffff 100%
    );

    --gradient-primary: linear-gradient(
            135deg,
            #123f8c 0%,
            #0f766e 100%
    );

    /* ======================================================
       SPACING
       ====================================================== */

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

    /* ======================================================
       RADIUS
       ====================================================== */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ======================================================
       SHADOWS
       ====================================================== */

    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 18px 45px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 28px 70px rgba(15, 23, 42, 0.16);

    /* ======================================================
       TRANSITIONS
       ====================================================== */

    --transition-fast: 180ms ease;
    --transition-normal: 260ms ease;
}

[data-theme="dark"] {

    /* ======================================================
       BRAND COLORS
       ====================================================== */

    --color-primary: #7dafff;
    --color-primary-hover: #a8c9ff;
    --color-primary-soft: #142b4f;

    --color-secondary: #5eead4;
    --color-secondary-soft: #123a37;

    --color-accent: #f0b85a;
    --color-accent-soft: #3b2b12;

    /* ======================================================
       BACKGROUNDS
       ====================================================== */

    --color-background-primary: #08111f;
    --color-background-secondary: #0f1b2d;
    --color-background-elevated: #132238;

    /* ======================================================
       TEXT
       ====================================================== */

    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-text-inverted: #08111f;

    /* ======================================================
       BORDERS
       ====================================================== */

    --color-border: #243247;
    --color-border-strong: #334155;

    /* ======================================================
       HEADER
       ====================================================== */

    --color-header-background: rgba(19, 34, 56, 0.90);

    /* ======================================================
       GRADIENTS
       ====================================================== */

    --gradient-hero: linear-gradient(
            135deg,
            #08111f 0%,
            #10233f 55%,
            #0f1b2d 100%
    );

    --gradient-primary: linear-gradient(
            135deg,
            #7dafff 0%,
            #5eead4 100%
    );

    /* ======================================================
       SHADOWS
       ====================================================== */

    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.45);
}