/* ==========================================================
   SYLFOW UI KIT v1.0
   File: variables.css
   Description:
   Variables globales officielles du Design System.
   ========================================================== */

:root {

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

    --color-primary: #16A34A;
    --color-primary-dark: #15803D;
    --color-primary-light: #DCFCE7;

    --color-secondary: #22C55E;

    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #DC2626;
    --color-info: #2563EB;

    --color-premium: #FACC15;

    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-background: #F8FAFC;
    --color-surface: #FFFFFF;

    --color-text: #111827;
    --color-text-light: #6B7280;

    --color-border: #E5E7EB;

    --color-disabled: #D1D5DB;

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

    --font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;

    --font-size-h6: 24px;
    --font-size-h5: 30px;
    --font-size-h4: 36px;
    --font-size-h3: 42px;
    --font-size-h2: 48px;
    --font-size-h1: 64px;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-small: 1.3;
    --line-height-normal: 1.5;
    --line-height-large: 1.8;

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

    --space-0: 0;

    --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;

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

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-round: 999px;

    /* ======================================================
       BORDER
    ====================================================== */

    --border-width: 1px;
    --border-color: var(--color-border);

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

    --shadow-sm:
        0 1px 3px rgba(0,0,0,.08);

    --shadow-md:
        0 8px 24px rgba(0,0,0,.08);

    --shadow-lg:
        0 20px 45px rgba(0,0,0,.12);

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

    --transition-fast: 150ms ease-in-out;
    --transition-normal: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* ======================================================
       CONTAINERS
    ====================================================== */

    --container-xs: 540px;
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1140px;
    --container-xl: 1320px;

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

    --header-height: 72px;

    /* ======================================================
       SIDEBAR
    ====================================================== */

    --sidebar-width: 280px;

    /* ======================================================
       Z INDEX
    ====================================================== */

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1060;

    /* ======================================================
       BREAKPOINTS
    ====================================================== */

    --breakpoint-mobile: 576px;
    --breakpoint-tablet: 768px;
    --breakpoint-laptop: 992px;
    --breakpoint-desktop: 1200px;
    --breakpoint-wide: 1400px;

}