:root {
    --primary-light: #ffffff;
    --secondary-light: #f8fafc;
    --tertiary-light: #f1f5f9;
    /* Soft neutral surface (page strips, panels) track order/profile/cuntomer authintication pages*/
    --surface-soft: #F3F4F4;

    --accent-header: radial-gradient(circle at 50% 15%, rgba(250, 129, 18, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, #c0d2e1 0%, transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(248, 226, 214, 0.9) 0%, rgba(231, 111, 46, 0.45) 30%, transparent 55%),
        linear-gradient(135deg, #f2b876 0%, #cfd6dc 30%, #ebece1 55%, #9c9d9f 100%);
    /* header background / top accent top banner*/

    /* header background / top accent */
    --banner-accent: #E76F2E;
    /* for top banner*/
    --accent-blue: #4d6a92;
    --accent-orange: #587a9c;
    --accent-green: #059669;
    --accent-purple: #5A8FA0;
    --accent-pink: #ec4899;
    --text-dark: #0f172a;
    --text-medium: #334155;
    --text-light: #64748b;
    --border-light: #d6dee8;
    --shadow-light: rgba(0, 0, 0, 0.1);

    --gradient-primary: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
    --gradient-accent: linear-gradient(135deg, #4D6A92 0%, #5A8FA0 100%);
    --gradient-hero: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #fce7f3 100%);
    /* Inner page title strips — uses --surface-soft (#F3F4F4); change --surface-soft to retune */
    --gradient-page-header: var(--surface-soft);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);

    /* Header & mega menu */
    --header-nav-bg: var(--accent-header);

    --mega-bg: var(--header-nav-bg);
    /* mega menu same as header */
    --mega-title-color: var(--text-dark);
    --mega-link-color: var(--text-dark);

    /* Global hover colors (use these across all sections/pages) 
    --link-hover: var(--accent-orange);
    --text-hover: var(--accent-orange);
    --header-link-hover: var(--accent-orange);
    --footer-link-hover: var(--accent-orange);
    --btn-hover-bg: var(--accent-orange);
    --btn-hover-text: var(--primary-light);
    --discount-btn-hover-bg: var(--accent-orange);
    --discount-btn-hover-text: var(--primary-light);
*/
    /* Footer */
    --footer-bg: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 107, 26, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);

    /* footer dark background */
    --footer-text-color: var(--primary-light);
    /* text on dark footer */
}