/* ==========================================================================
   CSS Variables - Teevron Design System
   ========================================================================== */

:root {
    /* -----------------------------------------------------------------------
       Brand Colors (Teevron palette)
       ----------------------------------------------------------------------- */
    --color-primary: #B23A8E;           /* Plum */
    --color-primary-dark: #8E2D70;      /* Plum dark (hover) */
    --color-primary-light: #C96AA8;     /* Plum light */
    --color-primary-light-2: #EAC0DC;   /* Plum very light */
    --color-secondary: #A874C4;         /* Purple */
    --color-secondary-light: #C9B7E6;   /* Lavender */
    --color-secondary-dark: #8A5AA0;    /* Purple dark */
    --color-teal-dark: #118D4E;         /* Forest */
    --color-teal-bright: #19C28A;       /* Emerald */
    --color-mint-light: #C9B7E6;        /* Lavender */
    --color-gry:#e6e6e6;

    /* -----------------------------------------------------------------------
       Hover Colors
       ----------------------------------------------------------------------- */
    --color-primary-hover: #8E2D70;     /* Plum hover (darker) */
    --color-secondary-hover: #8A5AA0;   /* Purple hover */
    --color-forest-hover: #0D6B3B;      /* Forest hover */
    --color-emerald-hover: #14A074;     /* Emerald hover */

    /* -----------------------------------------------------------------------
       Action / CTA Colors
       ----------------------------------------------------------------------- */
    --color-cta: #19C28A;               /* Plum as CTA */
    --color-cta-hover: #14A074;         /* Plum dark on hover */
    --color-text-cta: #ffffff;       /* Text color in button*/
    --color-text-cta-hover: #ffffff;       /* Text color in button*/
    --color-base-button: #111111;       /* Button base color */
    --color-base-button-hover: #3A3F1E;       /* Button base color */
    --color-text-button: #ffffff;       /* Text color in button*/
    --color-text-button-hover: #ffffff;       /* Text color in button*/
    --color-danger: #B23A8E;
    --color-danger-hover: #b71c1c;
    --color-success: #118D4E;           /* Forest */
    --color-warning: #ef6b42;
    --color-highlight: #19C28A;         /* Emerald */

    /* -----------------------------------------------------------------------
       Neutral Colors
       ----------------------------------------------------------------------- */
    --color-white: #ffffff;
    --color-black: #111111;
    --color-text-primary: #111111;      /* Rich Black */
    --color-text-secondary: #3A3F1E;    /* Olive */
    --color-text-muted: #5A5854;        /* Warm gray (from guide) */
    --color-heading: #111111;           /* Rich Black */

    /* -----------------------------------------------------------------------
       Grey Scale
       ----------------------------------------------------------------------- */
    --color-grey-50: #F8F7F4;           /* Warm White */
    --color-grey-100: #f0eee9;
    --color-grey-200: #E2DED5;
    --color-grey-300: #CFCBC2;
    --color-grey-400: #b0aba0;
    --color-grey-500: #6c757d;
    --color-grey-600: #4b4b4b;
    --color-grey-700: #3e3d3d;

    /* -----------------------------------------------------------------------
       Background Colors
       ----------------------------------------------------------------------- */
    --bg-body: #F8F7F4;                 /* Warm White */
    --bg-footer: #F8F7F4;               /* Warm White */
    --bg-header: #ffffff;
    --bg-overlay: rgba(7, 6, 6, 0.46);
    --bg-search-overlay: rgba(140, 149, 165, 0.6);

    /* -----------------------------------------------------------------------
       Typography (Teevron brand font: Helvetica Neue)
       ----------------------------------------------------------------------- */
    --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-xxl: 35px;

    /* -----------------------------------------------------------------------
       Border Radius
       ----------------------------------------------------------------------- */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 25px;
    --radius-circle: 50%;

    /* -----------------------------------------------------------------------
       Shadows
       ----------------------------------------------------------------------- */
    --shadow-dropdown: 0 12px 12px rgba(0, 0, 0, 0.52);
    --shadow-light: 0 12px 12px rgba(0, 0, 0, 0.09);
    --shadow-mobile-menu: 11px 0px 12px -6px rgba(0, 0, 0, 0.75);
    --shadow-banner: 0px 8px 14px rgba(178, 58, 142, 0.18);

    /* -----------------------------------------------------------------------
       Borders
       ----------------------------------------------------------------------- */
    --border-light: 1px solid var(--color-grey-200);
    --border-primary: 1px solid #B23A8E;

    /* -----------------------------------------------------------------------
       Transitions
       ----------------------------------------------------------------------- */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.5s ease;

    /* -----------------------------------------------------------------------
       Z-Index Scale
       ----------------------------------------------------------------------- */
    --z-dropdown: 1000;
    --z-header: 1002;
    --z-mobile-menu: 1010;
    --z-overlay: 1001;

    /* -----------------------------------------------------------------------
       Layout
       ----------------------------------------------------------------------- */
    --max-width-container: 1600px;
    --max-width-content: 1300px;
    --max-width-footer: 1180px;

    /* -----------------------------------------------------------------------
       Head / Promo bar
       ----------------------------------------------------------------------- */
    --color-head-website: #C9B7E6;      /* Lavender */
    --color-head-discount: #B23A8E;     /* Plum */
}