/*
 * P4 Customs Marketing Website - Design Tokens
 * ==============================================
 * Adapted from P4Books design system for marketing context
 *
 * This file extends the P4Books design tokens with:
 * - Larger typography for hero sections and marketing headlines
 * - More generous spacing for marketing layouts
 * - Marketing-specific layout constants
 * - Content-width constraints for readability
 *
 * Usage: Import this file BEFORE Bootstrap overrides
 * All tokens use CSS custom properties for runtime theming
 *
 * Version: 1.0.0 (Marketing)
 * Base: P4Books Design System v1.0.0
 * Last Updated: January 2026
 */

/* ============================================
   1. BRAND COLORS (Unchanged from P4Books)
   ============================================ */

:root {
    /* P4 Blue - Primary Brand Color */
    --p4-blue: #0A5FAD;
    --p4-blue-50: #E8F2FC;
    --p4-blue-100: #C5DEF7;
    --p4-blue-200: #9EC8F1;
    --p4-blue-300: #77B1EB;
    --p4-blue-400: #509AE5;
    --p4-blue-500: #0A5FAD;
    --p4-blue-600: #084D8A;
    --p4-blue-700: #063D6E;
    --p4-blue-800: #042D52;
    --p4-blue-900: #021D36;
    --p4-blue-rgb: 10, 95, 173;

    /* P4 Orange - Accent Color */
    --p4-orange: #FBAD48;
    --p4-orange-50: #FFF5E6;
    --p4-orange-100: #FEE8C7;
    --p4-orange-200: #FDD9A3;
    --p4-orange-300: #FCCA7F;
    --p4-orange-400: #FBBB5B;
    --p4-orange-500: #FBAD48;
    --p4-orange-600: #E99A30;
    --p4-orange-700: #D88920;
    --p4-orange-800: #B87010;
    --p4-orange-900: #8A5408;
    --p4-orange-rgb: 251, 173, 72;

    /* Cool Grey - Secondary/Neutral */
    --p4-grey: #939598;
    --p4-grey-50: #F5F5F6;
    --p4-grey-100: #E8E9EA;
    --p4-grey-200: #D4D5D7;
    --p4-grey-300: #B0B3B5;
    --p4-grey-400: #939598;
    --p4-grey-500: #6B6D70;
    --p4-grey-600: #565759;
    --p4-grey-700: #414243;
    --p4-grey-800: #2D2D2E;
    --p4-grey-900: #1A1A1B;
    --p4-grey-rgb: 147, 149, 152;
}

/* ============================================
   2. SEMANTIC COLORS (Unchanged from P4Books)
   ============================================ */

:root {
    /* Success - Confirmations, positive metrics */
    --success: #2E7D32;
    --success-50: #E8F5E9;
    --success-100: #C8E6C9;
    --success-200: #A5D6A7;
    --success-300: #81C784;
    --success-400: #66BB6A;
    --success-500: #4CAF50;
    --success-600: #43A047;
    --success-700: #388E3C;
    --success-800: #2E7D32;
    --success-900: #1B5E20;
    --success-rgb: 46, 125, 50;

    /* Warning - Cautions, pending items */
    --warning: #F9A825;
    --warning-50: #FFFDE7;
    --warning-100: #FFF9C4;
    --warning-200: #FFF59D;
    --warning-300: #FFF176;
    --warning-400: #FFEE58;
    --warning-500: #FFEB3B;
    --warning-600: #FDD835;
    --warning-700: #FBC02D;
    --warning-800: #F9A825;
    --warning-900: #F57F17;
    --warning-rgb: 249, 168, 37;

    /* Error - Errors, negative values */
    --error: #C62828;
    --error-50: #FFEBEE;
    --error-100: #FFCDD2;
    --error-200: #EF9A9A;
    --error-300: #E57373;
    --error-400: #EF5350;
    --error-500: #F44336;
    --error-600: #E53935;
    --error-700: #D32F2F;
    --error-800: #C62828;
    --error-900: #B71C1C;
    --error-rgb: 198, 40, 40;

    /* Info - Information, tips */
    --info: #0288D1;
    --info-50: #E1F5FE;
    --info-100: #B3E5FC;
    --info-200: #81D4FA;
    --info-300: #4FC3F7;
    --info-400: #29B6F6;
    --info-500: #03A9F4;
    --info-600: #039BE5;
    --info-700: #0288D1;
    --info-800: #0277BD;
    --info-900: #01579B;
    --info-rgb: 2, 136, 209;
}

/* ============================================
   3. TYPOGRAPHY - Enhanced for Marketing
   ============================================ */

:root {
    /* Font Families */
    --font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', 'Liberation Mono', monospace;

    /* Base Font Sizes (from P4Books) */
    --text-xs: 0.6875rem;    /* 11px */
    --text-sm: 0.75rem;      /* 12px */
    --text-base: 0.875rem;   /* 14px */
    --text-md: 1rem;         /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 2rem;        /* 32px */
    --text-4xl: 2.5rem;      /* 40px */

    /* MARKETING ENHANCEMENT: Extra Large Text for Hero Sections */
    --text-5xl: 3rem;        /* 48px - Hero headlines */
    --text-6xl: 3.75rem;     /* 60px - Large hero */
    --text-7xl: 4.5rem;      /* 72px - Extra large hero */
    --text-8xl: 6rem;        /* 96px - Mega hero (optional) */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;   /* Marketing addition for extra emphasis */

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* FLUID TYPOGRAPHY - Scales automatically between screen sizes */
    --text-xs-fluid: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);        /* 10px - 12px */
    --text-sm-fluid: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);         /* 12px - 14px */
    --text-base-fluid: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);         /* 14px - 16px */
    --text-md-fluid: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);             /* 16px - 18px */
    --text-lg-fluid: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);          /* 18px - 20px */
    --text-xl-fluid: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);           /* 20px - 24px */
    --text-2xl-fluid: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);            /* 24px - 30px */
    --text-3xl-fluid: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);       /* 30px - 36px */
    --text-4xl-fluid: clamp(2.25rem, 1.9rem + 1.75vw, 2.75rem);         /* 36px - 44px */
    --text-5xl-fluid: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);              /* 40px - 56px */
    --text-6xl-fluid: clamp(3rem, 2.5rem + 2.5vw, 4rem);                /* 48px - 64px */
    --text-7xl-fluid: clamp(3.5rem, 2.5rem + 5vw, 5rem);                /* 56px - 80px */

    /* RESPONSIVE ICON SIZES */
    --icon-xs: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);                    /* 16px - 20px */
    --icon-sm: clamp(1.5rem, 1.3rem + 1vw, 2rem);                       /* 24px - 32px */
    --icon-md: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);                     /* 32px - 40px */
    --icon-lg: clamp(3rem, 2.5rem + 2.5vw, 4rem);                       /* 48px - 64px */
    --icon-xl: clamp(4rem, 3rem + 5vw, 6rem);                           /* 64px - 96px */
    --icon-2xl: clamp(5rem, 3.5rem + 7.5vw, 8rem);                      /* 80px - 128px */
    --icon-feature: clamp(5rem, 4rem + 5vw, 8.75rem);                   /* 80px - 140px */
}

/* ============================================
   4. SPACING - Enhanced for Marketing
   ============================================ */

:root {
    /* Base Spacing Scale (4px base) - from P4Books */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;   /* 2px */
    --space-1: 0.25rem;      /* 4px */
    --space-1-5: 0.375rem;   /* 6px */
    --space-2: 0.5rem;       /* 8px */
    --space-2-5: 0.625rem;   /* 10px */
    --space-3: 0.75rem;      /* 12px */
    --space-3-5: 0.875rem;   /* 14px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-7: 1.75rem;      /* 28px */
    --space-8: 2rem;         /* 32px */
    --space-9: 2.25rem;      /* 36px */
    --space-10: 2.5rem;      /* 40px */
    --space-11: 2.75rem;     /* 44px */
    --space-12: 3rem;        /* 48px */
    --space-14: 3.5rem;      /* 56px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    --space-32: 8rem;        /* 128px */

    /* MARKETING ENHANCEMENT: Extra Large Spacing for Sections */
    --space-40: 10rem;       /* 160px - Large section gaps */
    --space-48: 12rem;       /* 192px - Hero section height */
    --space-64: 16rem;       /* 256px - Extra large sections */
}

/* ============================================
   5. LAYOUT - Marketing Specific
   ============================================ */

:root {
    /* Header & Navigation */
    --header-height: 64px;                /* Taller for marketing site */
    --header-height-mobile: 56px;

    /* Content Width Constraints (for readability) */
    --content-width-sm: 640px;            /* Article/blog width */
    --content-width-md: 960px;            /* Feature sections */
    --content-width-lg: 1280px;           /* Full marketing content */
    --content-width-xl: 1440px;           /* Wide sections */
    --content-width-full: 1920px;         /* Maximum width */

    /* Section Spacing */
    --section-padding-y: var(--space-20);       /* Vertical section padding */
    --section-padding-y-mobile: var(--space-12); /* Mobile section padding */
    --section-gap: var(--space-16);             /* Gap between sections */

    /* Card & Container */
    --card-padding: var(--space-6);
    --card-padding-lg: var(--space-8);
    --card-gap: var(--space-4);
    --form-gap: var(--space-3);

    /* Hero Section */
    --hero-min-height: 600px;
    --hero-min-height-mobile: 500px;

    /* Z-Index Scale */
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal-backdrop: 9000;
    --z-modal: 10000;
    --z-popover: 15000;
    --z-tooltip: 20000;
    --z-toast: 100000;
}

/* ============================================
   6. BORDERS (Unchanged from P4Books)
   ============================================ */

:root {
    /* Border Widths */
    --border-0: 0;
    --border-1: 1px;
    --border-2: 2px;
    --border-4: 4px;
    --border-8: 8px;

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
}

/* ============================================
   7. SHADOWS (Unchanged from P4Books)
   ============================================ */

:root {
    /* Light Mode Shadows */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-2xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Focus Ring */
    --shadow-focus: 0 0 0 3px rgba(10, 95, 173, 0.3);     /* Slightly thicker for marketing */
    --shadow-focus-error: 0 0 0 3px rgba(198, 40, 40, 0.3);
    --shadow-focus-success: 0 0 0 3px rgba(46, 125, 50, 0.3);
}

/* ============================================
   8. TRANSITIONS & ANIMATION (Unchanged)
   ============================================ */

:root {
    /* Durations */
    --duration-instant: 0ms;
    --duration-fast: 100ms;
    --duration-normal: 150ms;
    --duration-moderate: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 400ms;
    --duration-slowest: 500ms;

    /* Easing Functions */
    --ease-linear: linear;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Common Transitions */
    --transition-colors: color var(--duration-fast) var(--ease-default),
                         background-color var(--duration-fast) var(--ease-default),
                         border-color var(--duration-fast) var(--ease-default);
    --transition-opacity: opacity var(--duration-normal) var(--ease-default);
    --transition-shadow: box-shadow var(--duration-normal) var(--ease-default);
    --transition-transform: transform var(--duration-normal) var(--ease-out);
    --transition-all: all var(--duration-normal) var(--ease-default);
}

/* ============================================
   9. BREAKPOINTS (Aligned with Bootstrap 5)
   ============================================ */

:root {
    /* Bootstrap 5 alignment for consistency */
    --breakpoint-xs: 0px;        /* Extra small devices (phones) */
    --breakpoint-sm: 576px;      /* Small devices (large phones) */
    --breakpoint-md: 768px;      /* Medium devices (tablets) */
    --breakpoint-lg: 992px;      /* Large devices (desktops) */
    --breakpoint-xl: 1200px;     /* Extra large devices (large desktops) */
    --breakpoint-xxl: 1400px;    /* Extra extra large devices (larger desktops) */
}

/* ============================================
   10. COMPONENT SIZES - Marketing Specific
   ============================================ */

:root {
    /* Button Sizes (larger for marketing CTAs) */
    --btn-height-sm: 32px;
    --btn-height-md: 44px;        /* Standard CTA size */
    --btn-height-lg: 52px;        /* Large CTA size */
    --btn-height-xl: 60px;        /* Hero CTA size */

    /* Button Padding */
    --btn-padding-x-sm: var(--space-4);
    --btn-padding-x-md: var(--space-6);
    --btn-padding-x-lg: var(--space-8);
    --btn-padding-x-xl: var(--space-10);

    /* Input Sizes */
    --input-height-sm: 36px;
    --input-height-md: 44px;
    --input-height-lg: 52px;

    /* Icon Sizes */
    --icon-xs: 12px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 48px;
    --icon-3xl: 64px;

    /* Touch Targets (WCAG compliance) */
    --touch-target-min: 44px;
}

/* ============================================
   11. LIGHT THEME (DEFAULT) - Marketing Version
   ============================================ */

:root,
[data-theme="light"] {
    /* Theme Identity */
    --theme-mode: light;

    /* Primary Colors (P4 Blue in Light Mode) */
    --color-primary: var(--p4-blue);
    --color-primary-hover: var(--p4-blue-600);
    --color-primary-active: var(--p4-blue-700);
    --color-primary-light: var(--p4-blue-50);
    --color-primary-rgb: var(--p4-blue-rgb);

    /* Accent Colors (P4 Orange in Light Mode) */
    --color-accent: var(--p4-orange);
    --color-accent-hover: var(--p4-orange-600);
    --color-accent-active: var(--p4-orange-700);
    --color-accent-light: var(--p4-orange-50);
    --color-accent-rgb: var(--p4-orange-rgb);

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #FAFAFA;
    --bg-elevated: #FFFFFF;
    --bg-inverse: #1F1F1F;

    /* Surface Colors */
    --surface-card: #FFFFFF;
    --surface-hover: rgba(0, 0, 0, 0.04);
    --surface-active: rgba(0, 0, 0, 0.08);
    --surface-selected: var(--p4-blue-50);

    /* Text Colors */
    --text-primary: #323130;
    --text-secondary: #605E5C;
    --text-tertiary: #8A8886;
    --text-disabled: #A19F9D;
    --text-inverse: #FFFFFF;
    --text-link: var(--p4-blue);
    --text-link-hover: var(--p4-blue-600);

    /* Border Colors */
    --border-color: #E1E1E1;
    --border-light: #F0F0F0;
    --border-dark: #C8C8C8;
    --border-focus: var(--p4-blue);
    --border-error: var(--error);

    /* Semantic Backgrounds */
    --success-bg: var(--success-50);
    --warning-bg: var(--warning-50);
    --error-bg: var(--error-50);
    --info-bg: var(--info-50);

    /* Semantic Text */
    --success-text: var(--success-800);
    --warning-text: var(--warning-900);
    --error-text: var(--error-800);
    --info-text: var(--info-800);

    /* Divider */
    --divider-color: #E1E1E1;

    /* Overlay */
    --overlay-color: rgba(0, 0, 0, 0.5);
}

/* ============================================
   12. ACCESSIBILITY - REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-moderate: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
        --duration-slowest: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   13. HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
    :root,
    [data-theme="light"] {
        --border-color: #000000;
        --text-primary: #000000;
        --text-secondary: #333333;
    }
}

/* ============================================
   14. PRINT STYLES
   ============================================ */

@media print {
    :root {
        --color-primary: #000000;
        --bg-primary: #FFFFFF;
        --text-primary: #000000;
        --shadow-none: none;
        --shadow-xs: none;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
        --shadow-2xl: none;
    }
}

/* ============================================
   15. MARKETING GRADIENTS
   ============================================ */

:root {
    /* Hero gradients */
    --gradient-hero: linear-gradient(135deg, var(--p4-blue) 0%, var(--p4-blue-700) 100%);
    --gradient-hero-overlay: linear-gradient(135deg, rgba(10, 95, 173, 0.95) 0%, rgba(6, 61, 110, 0.95) 100%);

    /* Accent gradients */
    --gradient-accent: linear-gradient(135deg, var(--p4-orange) 0%, var(--p4-orange-700) 100%);

    /* Subtle background gradients */
    --gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
    --gradient-subtle-dark: linear-gradient(180deg, #1A1A1B 0%, #2D2D2E 100%);

    /* 2026 TREND: Organic mesh gradients */
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(10, 95, 173, 0.1) 0px, transparent 50%),
                     radial-gradient(at 100% 0%, rgba(251, 173, 72, 0.1) 0px, transparent 50%),
                     radial-gradient(at 100% 100%, rgba(10, 95, 173, 0.1) 0px, transparent 50%),
                     radial-gradient(at 0% 100%, rgba(251, 173, 72, 0.1) 0px, transparent 50%);
}

/* ============================================
   16. DARK MODE THEME (2026 TREND)
   ============================================ */

[data-theme="dark"] {
    /* Theme Identity */
    --theme-mode: dark;

    /* Primary Colors (Adjusted for dark mode) */
    --color-primary: #4A9FE5;
    --color-primary-hover: #77B1EB;
    --color-primary-active: #9EC8F1;
    --color-primary-light: rgba(10, 95, 173, 0.15);
    --color-primary-rgb: 74, 159, 229;

    /* Accent Colors (Brighter in dark mode) */
    --color-accent: #FCCA7F;
    --color-accent-hover: #FDD9A3;
    --color-accent-active: #FEE8C7;
    --color-accent-light: rgba(251, 173, 72, 0.15);
    --color-accent-rgb: 252, 202, 127;

    /* Background Colors - Using dark grey (not pure black) */
    --bg-primary: #1A1A1B;
    --bg-secondary: #2D2D2E;
    --bg-tertiary: #414243;
    --bg-elevated: #2D2D2E;
    --bg-inverse: #FFFFFF;

    /* Surface Colors */
    --surface-card: #2D2D2E;
    --surface-hover: rgba(255, 255, 255, 0.05);
    --surface-active: rgba(255, 255, 255, 0.10);
    --surface-selected: rgba(74, 159, 229, 0.15);

    /* Text Colors (High contrast for WCAG) */
    --text-primary: #FFFFFF;
    --text-secondary: #D4D5D7;
    --text-tertiary: #B0B3B5;
    --text-disabled: #6B6D70;
    --text-inverse: #1A1A1B;
    --text-link: #77B1EB;
    --text-link-hover: #9EC8F1;

    /* Border Colors */
    --border-color: #414243;
    --border-light: #565759;
    --border-dark: #2D2D2E;
    --border-focus: #4A9FE5;
    --border-error: #EF5350;

    /* Semantic Backgrounds */
    --success-bg: rgba(46, 125, 50, 0.15);
    --warning-bg: rgba(249, 168, 37, 0.15);
    --error-bg: rgba(198, 40, 40, 0.15);
    --info-bg: rgba(74, 159, 229, 0.15);

    /* Semantic Text */
    --success-text: #81C784;
    --warning-text: #FFEE58;
    --error-text: #EF5350;
    --info-text: #4FC3F7;

    /* Divider */
    --divider-color: #414243;

    /* Overlay */
    --overlay-color: rgba(0, 0, 0, 0.7);

    /* Shadows adjusted for dark mode */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.6), 0 1px 2px -1px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.7), 0 2px 4px -1px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.8), 0 4px 6px -2px rgba(0, 0, 0, 0.7);
    --shadow-2xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 10px 10px -5px rgba(0, 0, 0, 0.7);

    /* Gradients for dark mode */
    --gradient-hero: linear-gradient(135deg, #084D8A 0%, #021D36 100%);
    --gradient-subtle: linear-gradient(180deg, #1A1A1B 0%, #2D2D2E 100%);
}

/* ============================================
   17. ORGANIC SHAPES & CURVES (2026 TREND)
   ============================================ */

:root {
    /* Curved section dividers (SVG paths) */
    --curve-wave: path("M0,96L48,112C96,128,192,160,288,165.3C384,171,480,149,576,144C672,139,768,149,864,165.3C960,181,1056,203,1152,197.3C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z");

    /* Blob shapes for backgrounds (organic, asymmetric) */
    --blob-radius-1: 60% 40% 30% 70% / 60% 30% 70% 40%;
    --blob-radius-2: 40% 60% 70% 30% / 40% 70% 30% 60%;
    --blob-radius-3: 30% 70% 70% 30% / 60% 40% 60% 40%;

    /* Soft curves for cards */
    --radius-organic-sm: 20px 25px 20px 25px / 25px 20px 25px 20px;
    --radius-organic-md: 30px 40px 30px 40px / 40px 30px 40px 30px;
    --radius-organic-lg: 40px 50px 40px 50px / 50px 40px 50px 40px;
}

/* ============================================
   18. GLASSMORPHISM / FROSTED GLASS (2026 TREND)
   ============================================ */

:root {
    /* Glassmorphic surfaces */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: blur(10px);
    --glass-blur-heavy: blur(20px);

    /* Dark mode glass */
    --glass-bg-dark: rgba(0, 0, 0, 0.2);
    --glass-border-dark: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] {
    --glass-bg: var(--glass-bg-dark);
    --glass-border: var(--glass-border-dark);
}

/* ============================================
   19. MICRO-INTERACTIONS (2026 TREND)
   ============================================ */

:root {
    /* Button hover transforms */
    --hover-lift: translateY(-2px);
    --hover-lift-lg: translateY(-4px);
    --hover-scale: scale(1.02);
    --hover-scale-sm: scale(1.01);

    /* Active press */
    --active-press: scale(0.98);

    /* Bounce effect for CTAs */
    --bounce-scale: scale(1.05);

    /* Glow effects */
    --glow-primary: 0 0 20px rgba(10, 95, 173, 0.4);
    --glow-accent: 0 0 20px rgba(251, 173, 72, 0.4);
}

/* ============================================
   20. KINETIC TYPOGRAPHY (2026 TREND)
   ============================================ */

:root {
    /* Animation for text reveals */
    --text-reveal-duration: 0.6s;
    --text-reveal-delay: 0.1s;
    --text-reveal-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Hover effects for headings */
    --text-hover-shift: 2px;
    --text-gradient-animate: 200%;
}