/*
Theme Name: Everlys Chocolat
*/


:root {

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

    --color-bg: #ffffff;
    --color-bg-alt: #f4f7fb;

    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-text-light: #94a3b8;
    --color-text-lighter: #cbd5e1;

    --color-text-footer: #94a3b8;
    --color-text-credit: #64748b;

    /* ===== BRAND ===== */
    --color-primary: #0D1B4C;
    --color-primary-hover: #162865;

    --color-secondary: #F58220;
    --color-secondary-hover: #dd6f11;

    /* ===== STATES ===== */
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-warning: #f59e0b;

    /* ===== BASE ===== */
    --color-white: #ffffff;
    --color-black: #000000;

    /* ===== OVERLAYS ===== */
    --color-overlay-dark: rgba(13, 27, 76, 0.90);
    --color-overlay-light: rgba(255,255,255,0.75);

    /* ===== BORDERS ===== */
    --color-border: rgba(13, 27, 76, 0.08);
    --color-border-strong: rgba(13, 27, 76, 0.16);

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

    --font-main: 'Roboto', sans-serif;
    --font-title: 'Roboto', sans-serif;
    --font-signature: 'Roboto', sans-serif;

    /* =========================================================
       FONT SIZES
    ========================================================= */

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 32px;
    --fs-xxl: 42px;
    --fs-hero: 58px;

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

    --header-height: 90px;

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

    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 60px;
    --space-xxl: 100px;

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

    --transition-fast: 0.3s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 1s ease;

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

    --z-menu: 1000;
    --z-header: 1200;
    --z-dropdown: 1300;
    --z-modal: 2000;
    --z-lightbox: 3000;

    /* =========================================================
       LIGHTBOX
    ========================================================= */

    --lightbox-bg: rgba(0,0,0,0.95);

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

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-round: 50%;

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

    --shadow-sm: 0 2px 10px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.12);

    /* =========================================================
       CONTAINER
    ========================================================= */

    --container-width: 1300px;

}