/* ==========================================================================
   BMS UK — New Design System (tokens + reusable components)
   Not linked from header.php yet. See design-system-preview.html.
   Brand blue/orange kept anchored at their current live hex values;
   everything else (ramps, neutrals, glass/3D/gradient layers, motion,
   type) is new.
   ========================================================================== */

:root {
    /* ---- Color: primary (blue) ramp — #0e4bbd/#0a3a94/#0E2E50 kept exact ---- */
    --color-primary-50:  #EEF4FF;
    --color-primary-100: #DCE8FF;
    --color-primary-200: #B9D1FF;
    --color-primary-300: #8CB4FF;
    --color-primary-400: #5C90FF;
    --color-primary-500: #2F6BFF;
    --color-primary-600: #0e4bbd; /* brand blue (unchanged) */
    --color-primary-700: #0a3a94; /* brand blue-dark (unchanged) */
    --color-primary-800: #0E2E50; /* brand navy (unchanged) */
    --color-primary-900: #081D33;

    /* ---- Color: secondary (orange) ramp — #FF6922/#ff8c4a kept exact ---- */
    --color-secondary-50:  #FFF1E9;
    --color-secondary-100: #FFDFCB;
    --color-secondary-200: #FFC4A0;
    --color-secondary-300: #FFB388;
    --color-secondary-400: #ff8c4a; /* brand orange-light (unchanged) */
    --color-secondary-500: #FF6922; /* brand orange (unchanged) */
    --color-secondary-600: #E85413;
    --color-secondary-700: #C4430C;

    /* ---- Color: neutral slate scale (replaces mint-tinted --light) ---- */
    --gray-50:  #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* ---- Color: semantic (replaces orphaned teal/navy/red hardcodes) ---- */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger:  #DC3545; /* kept close to existing ticker red */
    --color-info:    #0EA5E9;

    /* ---- Gradients ---- */
    --gradient-brand: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-500) 50%, var(--color-primary-400) 100%);
    --gradient-sunset: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-400) 100%);
    --gradient-mesh: radial-gradient(at 15% 20%, rgba(14, 75, 189, 0.16) 0px, transparent 55%),
                      radial-gradient(at 85% 15%, rgba(255, 105, 34, 0.14) 0px, transparent 50%),
                      radial-gradient(at 50% 90%, rgba(47, 107, 255, 0.12) 0px, transparent 55%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.25) 100%);
    --gradient-dark-elevated: linear-gradient(160deg, #10306B 0%, var(--color-primary-800) 100%);

    /* ---- Radius (large-radius premium scale) ---- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ---- Shadows: layered + colored glows + glass ---- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 30px 60px -15px rgba(14, 75, 189, 0.25);
    --shadow-glow-primary: 0 12px 30px -6px rgba(14, 75, 189, 0.45);
    --shadow-glow-secondary: 0 12px 30px -6px rgba(255, 105, 34, 0.45);
    --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.4);

    /* ---- Glassmorphism ---- */
    --glass-bg-light: rgba(255, 255, 255, 0.55);
    --glass-bg-dark: rgba(16, 24, 40, 0.45);
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-blur: 20px;

    /* ---- Typography ---- */
    --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    --text-display: clamp(2.25rem, 1.4rem + 4vw, 4rem);
    --text-h1: clamp(1.875rem, 1.2rem + 3vw, 3rem);
    --text-h2: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
    --text-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --text-body-lg: 1.125rem;
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-eyebrow-tracking: 0.08em;

    /* ---- Spacing (4px base scale) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --section-py: clamp(4rem, 3rem + 4vw, 8rem);

    /* ---- Motion ---- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 600ms;
    --duration-slower: 900ms;
}

/* ==========================================================================
   Motion keyframes
   ========================================================================== */

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: var(--shadow-glow-primary); }
    50% { box-shadow: 0 16px 40px -6px rgba(14, 75, 189, 0.6); }
}

.ds-animate-float { animation: float 5s var(--ease-in-out-soft) infinite; }
.ds-animate-fade-up { animation: fade-up var(--duration-slow) var(--ease-out-expo) both; }
.ds-animate-glow { animation: glow-pulse 2.4s var(--ease-in-out-soft) infinite; }

/* ==========================================================================
   Base type utility classes
   ========================================================================== */

.ds-display { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); line-height: 1.1; color: var(--gray-900); }
.ds-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1); line-height: 1.15; color: var(--gray-900); }
.ds-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: 1.2; color: var(--gray-900); }
.ds-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); line-height: 1.3; color: var(--gray-900); }
.ds-body-lg { font-family: var(--font-body); font-size: var(--text-body-lg); line-height: 1.7; color: var(--gray-600); }
.ds-body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.7; color: var(--gray-600); }
.ds-small { font-family: var(--font-body); font-size: var(--text-small); color: var(--gray-500); }
.ds-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-small);
    letter-spacing: var(--text-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--color-primary-600);
    background: var(--color-primary-50);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-gradient-primary,
.btn-gradient-secondary,
.btn-glass,
.btn-outline-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-body);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo),
                background var(--duration-base) var(--ease-out-expo);
}

.btn-gradient-primary {
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: var(--shadow-glow-primary);
}
.btn-gradient-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -8px rgba(14, 75, 189, 0.55);
    color: #fff;
}

.btn-gradient-secondary {
    background: var(--gradient-sunset);
    color: #fff;
    box-shadow: var(--shadow-glow-secondary);
}
.btn-gradient-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -8px rgba(255, 105, 34, 0.55);
    color: #fff;
}

.btn-glass {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    color: var(--color-primary-700);
    box-shadow: var(--shadow-glass);
}
.btn-glass:hover {
    transform: translateY(-3px);
    color: var(--color-primary-700);
}

.btn-outline-modern {
    background: transparent;
    border: 2px solid var(--color-primary-600);
    color: var(--color-primary-600);
}
.btn-outline-modern:hover {
    background: var(--gradient-brand);
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card-glass {
    background: var(--gradient-glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
    padding: var(--space-6);
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
}
.card-glass:hover { transform: translateY(-6px); }

.card-floating {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    transition: transform var(--duration-slow) var(--ease-out-expo),
                box-shadow var(--duration-slow) var(--ease-out-expo);
}
.card-floating:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 80px -20px rgba(14, 75, 189, 0.32);
}

.card-3d {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
    transform-style: preserve-3d;
    perspective: 1000px;
}
.card-3d:hover {
    transform: perspective(1000px) rotateX(4deg) rotateY(-4deg) translateY(-8px);
    box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   Icon chip
   ========================================================================== */

.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--gradient-brand);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: var(--shadow-glow-primary);
}
.icon-chip.icon-chip-glass {
    background: var(--gradient-glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    color: var(--color-primary-600);
    box-shadow: var(--shadow-glass);
}
.icon-chip.icon-chip-secondary {
    background: var(--gradient-sunset);
    box-shadow: var(--shadow-glow-secondary);
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.surface-mesh {
    background-color: var(--gray-50);
    background-image: var(--gradient-mesh);
}

.surface-dark-elevated {
    background: var(--gradient-dark-elevated);
    color: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}