/**
 * Opto Logic — opto-core.css
 * Design tokens : espacement, layout, typographie, z-index, ombres, transitions.
 * Les couleurs sont dans colors.css (chargé avant ce fichier).
 *
 * Usage : var(--space-md), var(--radius-lg), var(--shadow-card), etc.
 */

:root {

    /* =========================================================
       Espacement (échelle × 4 px)
       ========================================================= */
    --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;
    --space-20: 80px;

    /* Aliases sémantiques */
    --space-xs:  var(--space-2);   /*  8px */
    --space-sm:  var(--space-3);   /* 12px */
    --space-md:  var(--space-6);   /* 24px */
    --space-lg:  var(--space-8);   /* 32px */
    --space-xl:  var(--space-12);  /* 48px */
    --space-2xl: var(--space-16);  /* 64px */
    --space-3xl: var(--space-20);  /* 80px */

    /* =========================================================
       Layout
       ========================================================= */
    --container-max:    1200px;
    --container-pad:    var(--space-md);    /* padding latéral */
    --container-pad-sm: var(--space-4);     /* padding latéral mobile */

    /* =========================================================
       Typographie
       ========================================================= */
    --font-body:    'Outfit', sans-serif;
    --font-display: 'Outfit', sans-serif;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  38px;

    --weight-light:    300;
    --weight-regular:  400;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    900;

    --leading-tight:  1.2;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* =========================================================
       Bordures
       ========================================================= */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    --border-color:       rgba(0, 0, 0, 0.10);
    --border-color-light: rgba(255, 255, 255, 0.10);

    /* =========================================================
       Ombres
       ========================================================= */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:   0 10px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
    --shadow-card: 0 8px 24px rgba(34, 47, 87, 0.12);

    /* Ombre bouton CTA jaune */
    --shadow-cta:
        0 8px 16px rgba(0,0,0,0.30),
        0 4px 8px rgba(0,0,0,0.20),
        0 0 20px rgba(226,221,0,0.40);
    --shadow-cta-hover:
        0 12px 24px rgba(0,0,0,0.40),
        0 6px 12px rgba(0,0,0,0.30),
        0 0 30px rgba(226,221,0,0.60);

    /* =========================================================
       Z-index
       ========================================================= */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    300;
    --z-toast:    400;

    /* =========================================================
       Transitions
       ========================================================= */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);

    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   350ms;

    --transition-base:      var(--duration-base) var(--ease-default);
    --transition-fast:      var(--duration-fast) var(--ease-default);
    --transition-transform: transform var(--duration-base) var(--ease-default);
    --transition-shadow:    box-shadow var(--duration-base) var(--ease-default);
    --transition-color:     color var(--duration-fast) var(--ease-default),
                            background-color var(--duration-fast) var(--ease-default);

    /* =========================================================
       Breakpoints (référence — utiliser dans les @media)
       --bp-sm  : 576px
       --bp-md  : 768px
       --bp-lg  : 992px
       --bp-xl  : 1200px
       ========================================================= */

}