/* ==========================================================================
   MAHAPARV THEME ARCHITECTURE
   Central configuration file for themes, colors, fonts, spacing, and sizing.
   To switch themes, uncomment one :root block and comment the others.
   ========================================================================== */

/* --- Import Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Sora:wght@400;600;700&family=Space+Grotesk:wght@400;500;700&family=Outfit:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Manrope:wght@400;600;700&family=Cinzel:wght@400;700&family=Lexend:wght@400;500;700&family=Work+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;400;500;600;700;800&family=Yatra+One&display=swap');

/* ==========================================================================
   THEME 1: AURORA (Vibrant Bright - Default Active)
   ========================================================================== */
/*
:root {
    --iris:         #6C63FF;
    --iris-light:   #EAE9FF;
    --iris-dark:    #4B44CC;
    --rose:         #FF6B9D;
    --rose-light:   #FFE8F2;
    --amber:        #FF9F43;
    --amber-light:  #FFF3E0;
    --teal:         #0ABFBC;
    --teal-light:   #E0F9F9;
    --ink:          #0D0D1A;
    --ink-soft:     #3D3D5C;
    --muted:        #8888AA;
    --border:       #EEEEF5;
    --surface:      #F8F8FC;
    --white:        #FFFFFF;

--primary: var(--iris);
--primary-light: var(--iris-light);
--primary-dark: var(--iris-dark);
--secondary: var(--rose);
--secondary-light: var(--rose-light);
--tertiary: var(--teal);
--tertiary-light: var(--teal-light);
--warning: var(--amber);
--warning-light: var(--amber-light);
--error: #DC2626;
--error-light: #FEE2E2;
--success: #16A34A;
--success-light: #DCFCE7;
--text-primary: var(--ink);
--text-secondary: var(--ink-soft);
--text-muted: var(--muted);
--background: var(--surface);
--disabled: #BDBDD3;

--grad-hero: linear-gradient(135deg, #6C63FF 0%, #A855F7 50%, #FF6B9D 100%);
--grad-card1: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%);
--grad-card2: linear-gradient(135deg, #FF6B9D 0%, #FF9F43 100%);
--grad-card3: linear-gradient(135deg, #0ABFBC 0%, #6C63FF 100%);
--grad-tonal: linear-gradient(135deg, #EAE9FF 0%, #FFE8F2 100%);
--grad-ambient: linear-gradient(180deg, #F0EEFF 0%, #F8F8FC 60%);
--hero-gradient: var(--grad-hero);
--card-gradient-1: var(--grad-card1);
--card-gradient-2: var(--grad-card2);
--card-gradient-3: var(--grad-card3);
--ambient-background: var(--grad-ambient);

--font-primary: 'Inter',
sans-serif;
--font-secondary: 'Instrument Serif',
serif;
--display-xl: 42px;
--display-lg: 36px;
--heading-lg: 28px;
--heading-md: 24px;
--title: 20px;
--body-lg: 16px;
--body-md: 14px;
--caption: 12px;

--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-hero: 40px;
--radius-full: 999px;

--space-4: 4px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-64: 64px;
--space-80: 80px;
--space-96: 96px;

--elevation-1: 0 2px 8px rgba(0, 0, 0, .05);
--elevation-2: 0 6px 20px rgba(108, 99, 255, .10);
--elevation-3: 0 12px 30px rgba(108, 99, 255, .18);
--elevation-4: 0 20px 40px rgba(15, 23, 42, .06);

--motion-fast: 150ms ease-out;
--motion-normal: 250ms ease-out;
--motion-slow: 350ms ease-out;

--viewport-width: 390px;
}
/* ==========================================================================
   THEME 2: FOREST EMERALD (Earthy Fresh Green - Commented)
   ========================================================================== */
/*
:root {
    --emerald:      #059669;
    --emerald-light:#ECFDF5;
    --emerald-dark: #047857;
    --mint:         #10B981;
    --mint-light:   #F0FDF4;
    --gold:         #F59E0B;
    --gold-light:   #FEF3C7;
    --forest:       #064E3B;
    --forest-light: #E6F4EA;
    --ink:          #061A12;
    --ink-soft:     #1E3F35;
    --muted:        #789C90;
    --border:       #E6EFEA;
    --surface:      #F4FAF7;
    --white:        #FFFFFF;

    --iris:         var(--emerald);
    --iris-light:   var(--emerald-light);
    --iris-dark:    var(--emerald-dark);
    --rose:         var(--mint);
    --rose-light:   var(--mint-light);
    --teal:         var(--forest);
    --teal-light:   var(--forest-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:        var(--emerald);
    --primary-light:  var(--emerald-light);
    --primary-dark:   var(--emerald-dark);
    --secondary:      var(--mint);
    --secondary-light: var(--mint-light);
    --tertiary:       var(--gold);
    --tertiary-light: var(--gold-light);
    --warning:        var(--gold);
    --warning-light:  var(--gold-light);
    --error:          #DC2626;
    --error-light:    #FEE2E2;
    --success:        #10B981;
    --success-light:  #D1FAE5;
    --text-primary:   var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted:     var(--muted);
    --background:     var(--surface);
    --disabled:       #A4BFB6;

    --grad-hero:    linear-gradient(135deg, #059669 0%, #10B981 50%, #F59E0B 100%);
    --grad-card1:   linear-gradient(135deg, #059669 0%, #047857 100%);
    --grad-card2:   linear-gradient(135deg, #10B981 0%, #34D399 100%);
    --grad-card3:   linear-gradient(135deg, #064E3B 0%, #10B981 100%);
    --grad-tonal:   linear-gradient(135deg, #ECFDF5 0%, #FFFBEB 100%);
    --grad-ambient: linear-gradient(180deg, #E6F7ED 0%, #F4FAF7 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);

    --font-primary:   'Inter', sans-serif;
    --font-secondary: 'Instrument Serif', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-hero: 40px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0 2px 8px rgba(0,0,0,.05);
    --elevation-2: 0 6px 20px rgba(5,150,105,.10);
    --elevation-3: 0 12px 30px rgba(5,150,105,.18);
    --elevation-4: 0 20px 40px rgba(6,30,22,.06);

    --motion-fast:   150ms ease-out;
    --motion-normal: 250ms ease-out;
    --motion-slow:   350ms ease-out;

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 3: MIDNIGHT ROYAL (Sleek High-Contrast Dark - Commented)
   ========================================================================== */
/*
:root {
    --indigo:       #818CF8;
    --indigo-light: #202449;
    --indigo-dark:  #4F46E5;
    --violet:       #A78BFA;
    --violet-light: #282046;
    --cyan:         #22D3EE;
    --cyan-light:   #152C3C;
    --night:        #0B0B16;
    --night-soft:   #1E1E2E;
    --muted:        #64748B;
    --border:       #1E293B;
    --surface:      #0F172A;
    --white:        #FFFFFF;

    --iris:         var(--indigo);
    --iris-light:   var(--indigo-light);
    --iris-dark:    var(--indigo-dark);
    --rose:         var(--violet);
    --rose-light:   var(--violet-light);
    --teal:         var(--cyan);
    --teal-light:   var(--cyan-light);
    --amber:        #FBBF24;
    --amber-light:  #2D2410;

    --primary:        var(--indigo);
    --primary-light:  var(--indigo-light);
    --primary-dark:   var(--indigo-dark);
    --secondary:      var(--violet);
    --secondary-light: var(--violet-light);
    --tertiary:       var(--cyan);
    --tertiary-light: var(--cyan-light);
    --warning:        #FBBF24;
    --warning-light:  #2D2410;
    --error:          #F87171;
    --error-light:    #3F1D1D;
    --success:        #34D399;
    --success-light:  #143224;
    --text-primary:   #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted:     var(--muted);
    --background:     var(--surface);
    --disabled:       #334155;

    --grad-hero:    linear-gradient(135deg, #818CF8 0%, #C084FC 50%, #6366F1 100%);
    --grad-card1:   linear-gradient(135deg, #4F46E5 0%, #312E81 100%);
    --grad-card2:   linear-gradient(135deg, #A78BFA 0%, #4C1D95 100%);
    --grad-card3:   linear-gradient(135deg, #0891B2 0%, #164E63 100%);
    --grad-tonal:   linear-gradient(135deg, #1E1B4B 0%, #2E1065 100%);
    --grad-ambient: linear-gradient(180deg, #111124 0%, #0B0B16 100%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);

    --font-primary:   'Inter', sans-serif;
    --font-secondary: 'Instrument Serif', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-hero: 40px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0 4px 12px rgba(0,0,0,.30);
    --elevation-2: 0 8px 24px rgba(0,0,0,.40);
    --elevation-3: 0 16px 36px rgba(129,140,248,.15);
    --elevation-4: 0 24px 48px rgba(0,0,0,.50);

    --motion-fast:   150ms ease-out;
    --motion-normal: 250ms ease-out;
    --motion-slow:   350ms ease-out;

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 4: SUNSET PEACH (Warm Terracotta & Coral - Commented)
   ========================================================================== */
/*
:root {
    --terracotta:   #E07A5F;
    --terra-light:  #FBECE8;
    --terra-dark:   #C3583C;
    --coral:        #F2CC8F;
    --coral-light:  #FEF9F0;
    --sand:         #F4F1DE;
    --sand-dark:    #E0DBB5;
    --charcoal:     #3D405B;
    --charcoal-soft:#5C5F80;
    --muted:        #9CA0B8;
    --border:       #ECEAE2;
    --surface:      #FAF9F6;
    --white:        #FFFFFF;

    --iris:         var(--terracotta);
    --iris-light:   var(--terra-light);
    --iris-dark:    var(--terra-dark);
    --rose:         var(--coral);
    --rose-light:   var(--coral-light);
    --teal:         #81B29A;
    --teal-light:   #ECF4F0;
    --amber:        #E6AF2E;
    --amber-light:  #FAF1D6;

    --primary:        var(--terracotta);
    --primary-light:  var(--terra-light);
    --primary-dark:   var(--terra-dark);
    --secondary:      var(--coral);
    --secondary-light: var(--coral-light);
    --tertiary:       var(--sand);
    --tertiary-light: var(--sand-dark);
    --warning:        #E6AF2E;
    --warning-light:  #FAF1D6;
    --error:          #E07A5F;
    --error-light:    #FDECE8;
    --success:        #81B29A;
    --success-light:  #ECF4F0;
    --text-primary:   var(--charcoal);
    --text-secondary: var(--charcoal-soft);
    --text-muted:     var(--muted);
    --background:     var(--surface);
    --disabled:       #C6C9D7;

    --grad-hero:    linear-gradient(135deg, #E07A5F 0%, #F4F1DE 50%, #81B29A 100%);
    --grad-card1:   linear-gradient(135deg, #E07A5F 0%, #C3583C 100%);
    --grad-card2:   linear-gradient(135deg, #F2CC8F 0%, #D4A359 100%);
    --grad-card3:   linear-gradient(135deg, #81B29A 0%, #3D405B 100%);
    --grad-tonal:   linear-gradient(135deg, #FBECE8 0%, #FEF9F0 100%);
    --grad-ambient: linear-gradient(180deg, #F9F7EF 0%, #FAF9F6 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);

    --font-primary:   'Inter', sans-serif;
    --font-secondary: 'Instrument Serif', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-hero: 40px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0 2px 8px rgba(0,0,0,.04);
    --elevation-2: 0 6px 20px rgba(224,122,95,.08);
    --elevation-3: 0 12px 30px rgba(224,122,95,.15);
    --elevation-4: 0 20px 40px rgba(61,64,91,.06);

    --motion-fast:   150ms ease-out;
    --motion-normal: 250ms ease-out;
    --motion-slow:   350ms ease-out;

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 5: CRIMSON ROSE (Reddish, Deep Ruby & Tonal Pink - Active)
   ========================================================================== */
/*
:root {
    --ruby: #E11D48;
    --ruby-light: #FFF1F2;
    --ruby-dark: #9F1239;
    --blush: #FDA4AF;
    --blush-light: #FFF5F5;
    --rose-gold: #FB7185;
    --ink: #1F0209;
    --ink-soft: #4C111C;
    --muted: #A27D83;
    --border: #FCE7EB;
    --surface: #FFF8F9;
    --white: #FFFFFF;

    --iris:         var(--ruby);
    --iris-light:   var(--ruby-light);
    --iris-dark:    var(--ruby-dark);
    --rose:         var(--blush);
    --rose-light:   var(--blush-light);
    --teal:         var(--rose-gold);
    --teal-light:   #FFE4E6;
    --amber:        #E28743;
    --amber-light:  #FDF3EB;

    --primary: var(--ruby);
    --primary-light: var(--ruby-light);
    --primary-dark: var(--ruby-dark);
    --secondary: var(--blush);
    --secondary-light: var(--blush-light);
    --tertiary: var(--rose-gold);
    --tertiary-light: #FFE4E6;
    --warning: #E28743;
    --warning-light: #FDF3EB;
    --error: #E11D48;
    --error-light: #FFE4E6;
    --success: #10B981;
    --success-light: #D1FAE5;
    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted: var(--muted);
    --background: var(--surface);
    --disabled: #DCA9B2;

    --grad-hero: linear-gradient(135deg, #E11D48 0%, #FB7185 50%, #FF6B9D 100%);
    --grad-card1: linear-gradient(135deg, #E11D48 0%, #9F1239 100%);
    --grad-card2: linear-gradient(135deg, #FDA4AF 0%, #FB7185 100%);
    --grad-card3: linear-gradient(135deg, #9F1239 0%, #FDA4AF 100%);
    --grad-tonal: linear-gradient(135deg, #FFF1F2 0%, #FFF5F5 100%);
    --grad-ambient: linear-gradient(180deg, #FCE8EB 0%, #FFF8F9 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #FFF1F2 0%, #FFF8F9 55%, #FCE8EB 100%);

    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Instrument Serif', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title: 20px;
    --body-lg: 16px;
    --body-md: 14px;
    --caption: 12px;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-hero: 40px;
    --radius-full: 999px;

    --space-4: 4px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0 2px 8px rgba(0, 0, 0, .04);
    --elevation-2: 0 6px 20px rgba(225, 29, 72, .08);
    --elevation-3: 0 12px 30px rgba(225, 29, 72, .15);
    --elevation-4: 0 20px 40px rgba(76, 17, 28, .06);

    --motion-fast: 150ms ease-out;
    --motion-normal: 250ms ease-out;
    --motion-slow: 350ms ease-out;

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 6: GOLDEN AMBER (Yellowish, Amber & Honey Gold - Commented)
   ========================================================================== */
/*
:root {
    --gold:         #D97706;
    --gold-light:   #FEF3C7;
    --gold-dark:    #B45309;
    --honey:        #F59E0B;
    --honey-light:  #FFFBEB;
    --champagne:    #FBBF24;
    --ink:          #241500;
    --ink-soft:     #4D3300;
    --muted:        #947D5A;
    --border:       #F7EAD3;
    --surface:      #FCF9F2;
    --white:        #FFFFFF;

    --iris:         var(--gold);
    --iris-light:   var(--gold-light);
    --iris-dark:    var(--gold-dark);
    --rose:         var(--honey);
    --rose-light:   var(--honey-light);
    --teal:         var(--champagne);
    --teal-light:   #FEF9E7;
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:        var(--gold);
    --primary-light:  var(--gold-light);
    --primary-dark:   var(--gold-dark);
    --secondary:      var(--honey);
    --secondary-light: var(--honey-light);
    --tertiary:       var(--champagne);
    --tertiary-light: #FEF9E7;
    --warning:        var(--gold);
    --warning-light:  var(--gold-light);
    --error:          #DC2626;
    --error-light:    #FEE2E2;
    --success:        #16A34A;
    --success-light:  #DCFCE7;
    --text-primary:   var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted:     var(--muted);
    --background:     var(--surface);
    --disabled:       #D2C4AE;

    --grad-hero:    linear-gradient(135deg, #D97706 0%, #FBBF24 50%, #F59E0B 100%);
    --grad-card1:   linear-gradient(135deg, #D97706 0%, #B45309 100%);
    --grad-card2:   linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    --grad-card3:   linear-gradient(135deg, #B45309 0%, #FBBF24 100%);
    --grad-tonal:   linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
    --grad-ambient: linear-gradient(180deg, #FAF2E2 0%, #FCF9F2 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);

    --font-primary:   'Inter', sans-serif;
    --font-secondary: 'Instrument Serif', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-hero: 40px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0 2px 8px rgba(0,0,0,.04);
    --elevation-2: 0 6px 20px rgba(217,119,6,0.08);
    --elevation-3: 0 12px 30px rgba(217,119,6,0.15);
    --elevation-4: 0 20px 40px rgba(77,51,0,0.06);

    --motion-fast:   150ms ease-out;
    --motion-normal: 250ms ease-out;
    --motion-slow:   350ms ease-out;

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 7: GOVERNMENT UDYOG (National Tricolor + Gov Navy - Active)
   ========================================================================== */
/*
:root {
    --navy:         #0A192F;
    --navy-light:   #E6F0FA;
    --navy-dark:    #020C1B;
    --saffron:      #F97316;
    --saffron-light:#FFF7ED;
    --saffron-dark: #C2410C;
    --green:        #059669;
    --green-light:  #ECFDF5;
    --gold:         #F59E0B;
    --gold-light:   #FEF3C7;
    --ink:          #0F172A;
    --ink-soft:     #334155;
    --muted:        #64748B;
    --border:       #E2E8F0;
    --surface:      #FFFFFF;
    --white:        #FFFFFF;

    --iris:         var(--saffron);
    --iris-light:   var(--saffron-light);
    --iris-dark:    var(--saffron-dark);
    --rose:         var(--navy);
    --rose-light:   var(--navy-light);
    --teal:         var(--green);
    --teal-light:   var(--green-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--saffron);
    --primary-light:    var(--saffron-light);
    --primary-dark:     var(--saffron-dark);
    --secondary:        var(--navy);
    --secondary-light:  var(--navy-light);
    --tertiary:         var(--green);
    --tertiary-light:   var(--green-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #DC2626;
    --error-light:      #FEE2E2;
    --success:          var(--green);
    --success-light:    var(--green-light);
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #94A3B8;

    --grad-hero:    linear-gradient(135deg, #F97316 0%, #F59E0B 50%, #059669 100%);
    --grad-card1:   linear-gradient(135deg, #F97316 0%, #FB923C 100%);
    --grad-card2:   linear-gradient(135deg, #0A192F 0%, #1E3A8A 100%);
    --grad-card3:   linear-gradient(135deg, #059669 0%, #10B981 100%);
    --grad-tonal:   linear-gradient(135deg, #FFF7ED 0%, #ECFDF5 100%);
    --grad-ambient: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #FFF7ED 0%, #FFFFFF 40%, #ECFDF5 100%);

    --font-primary:   'Mukta', sans-serif;
    --font-secondary: 'Mukta', sans-serif;
    --display-xl: 52px;
    --display-lg: 44px;
    --heading-lg: 34px;
    --heading-md: 26px;
    --title:      22px;
    --body-lg:    18px;
    --body-md:    16px;
    --caption:    14px;

    --radius-sm:   10px;
    --radius-md:   16px;
    --radius-lg:   20px;
    --radius-xl:   32px;
    --radius-hero: 40px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(10, 37, 64, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(10, 37, 64, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(10, 37, 64, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 8: COSMIC VIOLET (Cyberpunk Purple & Pink - Commented)
   ========================================================================== */
/*
:root {
    --violet:       #7C3AED;
    --violet-light: #F5F3FF;
    --violet-dark:  #5B21B6;
    --fuchsia:      #D946EF;
    --fuchsia-light:#FDF4FF;
    --cyan:         #0891B2;
    --cyan-light:   #ECFEFF;
    --gold:         #EAB308;
    --gold-light:   #FEFCE8;
    --ink:          #1E1B4B;
    --ink-soft:     #312E81;
    --muted:        #6366F1;
    --border:       #E0E7FF;
    --surface:      #FAF5FF;
    --white:        #FFFFFF;

    --iris:         var(--violet);
    --iris-light:   var(--violet-light);
    --iris-dark:    var(--violet-dark);
    --rose:         var(--fuchsia);
    --rose-light:   var(--fuchsia-light);
    --teal:         var(--cyan);
    --teal-light:   var(--cyan-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--violet);
    --primary-light:    var(--violet-light);
    --primary-dark:     var(--violet-dark);
    --secondary:        var(--fuchsia);
    --secondary-light:  var(--fuchsia-light);
    --tertiary:         var(--cyan);
    --tertiary-light:   var(--cyan-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #EF4444;
    --error-light:      #FEE2E2;
    --success:          #10B981;
    --success-light:    #D1FAE5;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #A5B4FC;

    --grad-hero:    linear-gradient(135deg, #7C3AED 0%, #D946EF 50%, #06B6D4 100%);
    --grad-card1:   linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    --grad-card2:   linear-gradient(135deg, #D946EF 0%, #A21CAF 100%);
    --grad-card3:   linear-gradient(135deg, #0891B2 0%, #0369A1 100%);
    --grad-tonal:   linear-gradient(135deg, #F5F3FF 0%, #FDF4FF 100%);
    --grad-ambient: linear-gradient(180deg, #F3E8FF 0%, #FAF5FF 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #F5F3FF 0%, #FFFFFF 55%, #ECFEFF 100%);

    --font-primary:   'Sora', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(124, 58, 237, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(124, 58, 237, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(124, 58, 237, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(124, 58, 237, 0.15), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 9: NORD ICE (Scandinavian Slate & Frost Teal - Commented)
   ========================================================================== */
/*
:root {
    --blue:         #2563EB;
    --blue-light:   #F0F9FF;
    --blue-dark:    #1D4ED8;
    --sky:          #0EA5E9;
    --sky-light:    #F0F9FF;
    --slate:        #475569;
    --slate-light:  #F8FAFC;
    --amber:        #D97706;
    --amber-light:  #FEF3C7;
    --ink:          #0F172A;
    --ink-soft:     #1E293B;
    --muted:        #64748B;
    --border:       #E2E8F0;
    --surface:      #F8FAFC;
    --white:        #FFFFFF;

    --iris:         var(--blue);
    --iris-light:   var(--blue-light);
    --iris-dark:    var(--blue-dark);
    --rose:         var(--sky);
    --rose-light:   var(--sky-light);
    --teal:         var(--slate);
    --teal-light:   var(--slate-light);
    --amber:        var(--amber);
    --amber-light:  var(--amber-light);

    --primary:          var(--blue);
    --primary-light:    var(--blue-light);
    --primary-dark:     var(--blue-dark);
    --secondary:        var(--sky);
    --secondary-light:  var(--sky-light);
    --tertiary:         var(--slate);
    --tertiary-light:   var(--slate-light);
    --warning:          var(--amber);
    --warning-light:    var(--amber-light);
    --error:            #EF4444;
    --error-light:      #FEE2E2;
    --success:          #10B981;
    --success-light:    #D1FAE5;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #94A3B8;

    --grad-hero:    linear-gradient(135deg, #2563EB 0%, #0EA5E9 50%, #64748B 100%);
    --grad-card1:   linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    --grad-card2:   linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    --grad-card3:   linear-gradient(135deg, #475569 0%, #334155 100%);
    --grad-tonal:   linear-gradient(135deg, #F0F9FF 0%, #F1F5F9 100%);
    --grad-ambient: linear-gradient(180deg, #E0F2FE 0%, #F8FAFC 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #F0F9FF 0%, #FFFFFF 55%, #F1F5F9 100%);

    --font-primary:   'Outfit', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(37, 99, 235, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(37, 99, 235, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(37, 99, 235, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(37, 99, 235, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 10: SANDSTONE OASIS (Desert Cream & Clay Terracotta - Commented)
   ========================================================================== */
/*
:root {
    --ochre:        #D97706;
    --ochre-light:  #FEF3C7;
    --ochre-dark:   #B55B02;
    --terracotta:   #C2410C;
    --terra-light:  #FFEDD5;
    --olive:        #65A30D;
    --olive-light:  #F7FEE7;
    --charcoal:     #292524;
    --ink:          #1C1917;
    --ink-soft:     #44403C;
    --muted:        #78716C;
    --border:       #E7E5E4;
    --surface:      #FAF8F5;
    --white:        #FFFFFF;

    --iris:         var(--ochre);
    --iris-light:   var(--ochre-light);
    --iris-dark:    var(--ochre-dark);
    --rose:         var(--terracotta);
    --rose-light:   var(--terra-light);
    --teal:         var(--olive);
    --teal-light:   var(--olive-light);
    --amber:        #E28743;
    --amber-light:  #FDF3EB;

    --primary:          var(--ochre);
    --primary-light:    var(--ochre-light);
    --primary-dark:     var(--ochre-dark);
    --secondary:        var(--terracotta);
    --secondary-light:  var(--terra-light);
    --tertiary:         var(--olive);
    --tertiary-light:   var(--olive-light);
    --warning:          #E28743;
    --warning-light:    #FDF3EB;
    --error:            #DC2626;
    --error-light:      #FEE2E2;
    --success:          #16A34A;
    --success-light:    #DCFCE7;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #A8A29E;

    --grad-hero:    linear-gradient(135deg, #D97706 0%, #C2410C 50%, #65A30D 100%);
    --grad-card1:   linear-gradient(135deg, #D97706 0%, #B55B02 100%);
    --grad-card2:   linear-gradient(135deg, #C2410C 0%, #9A3412 100%);
    --grad-card3:   linear-gradient(135deg, #65A30D 0%, #4D7C0F 100%);
    --grad-tonal:   linear-gradient(135deg, #FEF3C7 0%, #FFEDD5 100%);
    --grad-ambient: linear-gradient(180deg, #F5F3E9 0%, #FAF8F5 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #FEF3C7 0%, #FFFFFF 55%, #F7FEE7 100%);

    --font-primary:   'Plus Jakarta Sans', sans-serif;
    --font-secondary: 'Playfair Display', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(217, 119, 6, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(217, 119, 6, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(217, 119, 6, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(217, 119, 6, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 11: LAVENDER BLISS (Calming Lavender & Lilac - Commented)
   ========================================================================== */
/*
:root {
    --lavender:       #8B5CF6;
    --lavender-light: #F5F3FF;
    --lavender-dark:  #6D28D9;
    --orchid:         #EC4899;
    --orchid-light:   #FDF2F8;
    --lilac:          #C084FC;
    --lilac-light:    #FAF5FF;
    --gold:           #EAB308;
    --gold-light:     #FEFCE8;
    --ink:            #2E1065;
    --ink-soft:       #4C1D95;
    --muted:          #7C3AED;
    --border:         #F3E8FF;
    --surface:        #FAF8FF;
    --white:          #FFFFFF;

    --iris:         var(--lavender);
    --iris-light:   var(--lavender-light);
    --iris-dark:    var(--lavender-dark);
    --rose:         var(--orchid);
    --rose-light:   var(--orchid-light);
    --teal:         var(--lilac);
    --teal-light:   var(--lilac-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--lavender);
    --primary-light:    var(--lavender-light);
    --primary-dark:     var(--lavender-dark);
    --secondary:        var(--orchid);
    --secondary-light:  var(--orchid-light);
    --tertiary:         var(--lilac);
    --tertiary-light:   var(--lilac-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #EF4444;
    --error-light:      #FEE2E2;
    --success:          #10B981;
    --success-light:    #D1FAE5;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #DDD6FE;

    --grad-hero:    linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #C084FC 100%);
    --grad-card1:   linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    --grad-card2:   linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
    --grad-card3:   linear-gradient(135deg, #C084FC 0%, #A855F7 100%);
    --grad-tonal:   linear-gradient(135deg, #F5F3FF 0%, #FDF2F8 100%);
    --grad-ambient: linear-gradient(180deg, #EDE9FE 0%, #FAF8FF 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #F5F3FF 0%, #FFFFFF 55%, #FDF2F8 100%);

    --font-primary:   'DM Sans', sans-serif;
    --font-secondary: 'Instrument Serif', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(139, 92, 246, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(139, 92, 246, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(139, 92, 246, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(139, 92, 246, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 12: EMERALD PRESTIGE (Luxury Emerald & Champagne Gold - Commented)
   ========================================================================== */
/*
:root {
    --emerald:      #065F46;
    --emerald-light:#E6F4EA;
    --emerald-dark: #044E37;
    --amber:        #B45309;
    --amber-light:  #FEF3C7;
    --gold:         #F59E0B;
    --gold-light:   #FFFBEB;
    --forest:       #064E3B;
    --ink:          #022C22;
    --ink-soft:     #0F5132;
    --muted:        #198754;
    --border:       #D1E7DD;
    --surface:      #F4FAF6;
    --white:        #FFFFFF;

    --iris:         var(--emerald);
    --iris-light:   var(--emerald-light);
    --iris-dark:    var(--emerald-dark);
    --rose:         var(--amber);
    --rose-light:   var(--amber-light);
    --teal:         var(--gold);
    --teal-light:   var(--gold-light);
    --amber:        var(--amber);
    --amber-light:  var(--amber-light);

    --primary:          var(--emerald);
    --primary-light:    var(--emerald-light);
    --primary-dark:     var(--emerald-dark);
    --secondary:        var(--amber);
    --secondary-light:  var(--amber-light);
    --tertiary:         var(--gold);
    --tertiary-light:   var(--gold-light);
    --warning:          var(--amber);
    --warning-light:    var(--amber-light);
    --error:            #DC2626;
    --error-light:      #FEE2E2;
    --success:          #198754;
    --success-light:    #D1E7DD;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #A3D1C1;

    --grad-hero:    linear-gradient(135deg, #065F46 0%, #B45309 50%, #F59E0B 100%);
    --grad-card1:   linear-gradient(135deg, #065F46 0%, #044E37 100%);
    --grad-card2:   linear-gradient(135deg, #B45309 0%, #78350F 100%);
    --grad-card3:   linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --grad-tonal:   linear-gradient(135deg, #E6F4EA 0%, #FEF3C7 100%);
    --grad-ambient: linear-gradient(180deg, #D1E7DD 0%, #F4FAF6 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #E6F4EA 0%, #FFFFFF 55%, #FEF3C7 100%);

    --font-primary:   'Manrope', sans-serif;
    --font-secondary: 'Cinzel', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(6, 95, 70, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(6, 95, 70, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(6, 95, 70, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(6, 95, 70, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 13: CRIMSON EMBER (Lava Red & Charcoal Black - Commented)
   ========================================================================== */
/*
:root {
    --red:          #DC2626;
    --red-light:    #FEF2F2;
    --red-dark:     #991B1B;
    --gray:         #111827;
    --gray-light:   #F3F4F6;
    --rose:         #991B1B;
    --rose-light:   #FEF2F2;
    --amber:        #D97706;
    --amber-light:  #FEF3C7;
    --ink:          #0F172A;
    --ink-soft:     #1F2937;
    --muted:        #4B5563;
    --border:       #E5E7EB;
    --surface:      #F9FAFB;
    --white:        #FFFFFF;

    --iris:         var(--red);
    --iris-light:   var(--red-light);
    --iris-dark:    var(--red-dark);
    --rose:         var(--gray);
    --rose-light:   var(--gray-light);
    --teal:         var(--rose);
    --teal-light:   var(--rose-light);
    --amber:        var(--amber);
    --amber-light:  var(--amber-light);

    --primary:          var(--red);
    --primary-light:    var(--red-light);
    --primary-dark:     var(--red-dark);
    --secondary:        var(--gray);
    --secondary-light:  var(--gray-light);
    --tertiary:         var(--rose);
    --tertiary-light:   var(--rose-light);
    --warning:          var(--amber);
    --warning-light:    var(--amber-light);
    --error:            #DC2626;
    --error-light:      #FEE2E2;
    --success:          #16A34A;
    --success-light:    #DCFCE7;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #9CA3AF;

    --grad-hero:    linear-gradient(135deg, #DC2626 0%, #111827 50%, #991B1B 100%);
    --grad-card1:   linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
    --grad-card2:   linear-gradient(135deg, #111827 0%, #374151 100%);
    --grad-card3:   linear-gradient(135deg, #991B1B 0%, #7F1D1D 100%);
    --grad-tonal:   linear-gradient(135deg, #FEF2F2 0%, #F3F4F6 100%);
    --grad-ambient: linear-gradient(180deg, #FEE2E2 0%, #F9FAFB 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #FEF2F2 0%, #FFFFFF 55%, #F3F4F6 100%);

    --font-primary:   'Lexend', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(220, 38, 38, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(220, 38, 38, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(220, 38, 38, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(220, 38, 38, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 14: SAKURA GARDEN (Cherry Blossom & Moss Green - Commented)
   ========================================================================== */
/*
:root {
    --blossom:      #EC4899;
    --blossom-light:#FDF2F8;
    --blossom-dark: #BE185D;
    --moss:         #15803D;
    --moss-light:   #F0FDF4;
    --magenta:      #E879F9;
    --magenta-light:#FDF4FF;
    --amber:        #EAB308;
    --amber-light:  #FEFCE8;
    --ink:          #4D0A30;
    --ink-soft:     #1B4332;
    --muted:        #9D174D;
    --border:       #FBCFE8;
    --surface:      #FFFBFD;
    --white:        #FFFFFF;

    --iris:         var(--blossom);
    --iris-light:   var(--blossom-light);
    --iris-dark:    var(--blossom-dark);
    --rose:         var(--moss);
    --rose-light:   var(--moss-light);
    --teal:         var(--magenta);
    --teal-light:   var(--magenta-light);
    --amber:        var(--amber);
    --amber-light:  var(--amber-light);

    --primary:          var(--blossom);
    --primary-light:    var(--blossom-light);
    --primary-dark:     var(--blossom-dark);
    --secondary:        var(--moss);
    --secondary-light:  var(--moss-light);
    --tertiary:         var(--magenta);
    --tertiary-light:   var(--magenta-light);
    --warning:          var(--amber);
    --warning-light:    var(--amber-light);
    --error:            #EF4444;
    --error-light:      #FEE2E2;
    --success:          #15803D;
    --success-light:    #DCFCE7;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #F9A8D4;

    --grad-hero:    linear-gradient(135deg, #EC4899 0%, #15803D 50%, #E879F9 100%);
    --grad-card1:   linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
    --grad-card2:   linear-gradient(135deg, #15803D 0%, #166534 100%);
    --grad-card3:   linear-gradient(135deg, #E879F9 0%, #D946EF 100%);
    --grad-tonal:   linear-gradient(135deg, #FDF2F8 0%, #F0FDF4 100%);
    --grad-ambient: linear-gradient(180deg, #FCE7F3 0%, #FFFBFD 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #FDF2F8 0%, #FFFFFF 55%, #F0FDF4 100%);

    --font-primary:   'Outfit', sans-serif;
    --font-secondary: 'Playfair Display', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(236, 72, 153, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(236, 72, 153, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(236, 72, 153, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(236, 72, 153, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 15: OCEANIC PEARL (Deep Sea Teal & Seafoam - Commented)
   ========================================================================== */
/*
:root {
    --teal:         #0D9488;
    --teal-light:   #F0FDFA;
    --teal-dark:    #0F766E;
    --gold:         #D97706;
    --gold-light:   #FEF3C7;
    --sky:          #0284C7;
    --sky-light:    #F0F9FF;
    --ink:          #042F2E;
    --ink-soft:     #115E59;
    --muted:        #0D9488;
    --border:       #CCFBF1;
    --surface:      #F5FFFD;
    --white:        #FFFFFF;

    --iris:         var(--teal);
    --iris-light:   var(--teal-light);
    --iris-dark:    var(--teal-dark);
    --rose:         var(--gold);
    --rose-light:   var(--gold-light);
    --teal:         var(--sky);
    --teal-light:   var(--sky-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--teal);
    --primary-light:    var(--teal-light);
    --primary-dark:     var(--teal-dark);
    --secondary:        var(--gold);
    --secondary-light:  var(--gold-light);
    --tertiary:         var(--sky);
    --tertiary-light:   var(--sky-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #EF4444;
    --error-light:      #FEE2E2;
    --success:          #14B8A6;
    --success-light:    #CCFBF1;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #99F6E4;

    --grad-hero:    linear-gradient(135deg, #0D9488 0%, #D97706 50%, #0284C7 100%);
    --grad-card1:   linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
    --grad-card2:   linear-gradient(135deg, #D97706 0%, #B45309 100%);
    --grad-card3:   linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
    --grad-tonal:   linear-gradient(135deg, #F0FDFA 0%, #FEF3C7 100%);
    --grad-ambient: linear-gradient(180deg, #CCFBF1 0%, #F5FFFD 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #F0FDFA 0%, #FFFFFF 55%, #F0F9FF 100%);

    --font-primary:   'Plus Jakarta Sans', sans-serif;
    --font-secondary: 'Instrument Serif', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(13, 148, 136, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(13, 148, 136, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(13, 148, 136, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(13, 148, 136, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 16: CYBERPUNK LIME (Electric Lime & Dark Carbon - Commented)
   ========================================================================== */
/*
:root {
    --lime:         #84CC16;
    --lime-light:   #F7FEE7;
    --lime-dark:    #4D7C0F;
    --carbon:       #0F172A;
    --carbon-light: #1E293B;
    --neon:         #3B82F6;
    --neon-light:   #EFF6FF;
    --gold:         #EAB308;
    --gold-light:   #FEFCE8;
    --ink:          #1A1A1A;
    --ink-soft:     #333333;
    --muted:        #4D7C0F;
    --border:       #E5E7EB;
    --surface:      #F9FAF9;
    --white:        #FFFFFF;

    --iris:         var(--lime);
    --iris-light:   var(--lime-light);
    --iris-dark:    var(--lime-dark);
    --rose:         var(--carbon);
    --rose-light:   var(--carbon-light);
    --teal:         var(--neon);
    --teal-light:   var(--neon-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--lime);
    --primary-light:    var(--lime-light);
    --primary-dark:     var(--lime-dark);
    --secondary:        var(--carbon);
    --secondary-light:  var(--carbon-light);
    --tertiary:         var(--neon);
    --tertiary-light:   var(--neon-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #EF4444;
    --error-light:      #FEE2E2;
    --success:          #10B981;
    --success-light:    #D1FAE5;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #BEF264;

    --grad-hero:    linear-gradient(135deg, #84CC16 0%, #0F172A 50%, #3B82F6 100%);
    --grad-card1:   linear-gradient(135deg, #84CC16 0%, #4D7C0F 100%);
    --grad-card2:   linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --grad-card3:   linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    --grad-tonal:   linear-gradient(135deg, #F7FEE7 0%, #EFF6FF 100%);
    --grad-ambient: linear-gradient(180deg, #ECFDF5 0%, #F9FAF9 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #F7FEE7 0%, #FFFFFF 55%, #EFF6FF 100%);

    --font-primary:   'Space Grotesk', sans-serif;
    --font-secondary: 'Sora', sans-serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(132, 204, 22, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(132, 204, 22, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(132, 204, 22, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(132, 204, 22, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 17: COPPER RUST (Industrial Copper & Rust - Commented)
   ========================================================================== */
/*
:root {
    --copper:       #CA8A04;
    --copper-light: #FEF9C3;
    --copper-dark:  #A16207;
    --rust:         #0891B2;
    --rust-light:   #ECFEFF;
    --patina:       #475569;
    --patina-light: #F8FAFC;
    --gold:         #EAB308;
    --gold-light:   #FEFCE8;
    --ink:          #2A2421;
    --ink-soft:     #4338CA;
    --muted:        #854D0E;
    --border:       #FEF08A;
    --surface:      #FDFDF9;
    --white:        #FFFFFF;

    --iris:         var(--copper);
    --iris-light:   var(--copper-light);
    --iris-dark:    var(--copper-dark);
    --rose:         var(--rust);
    --rose-light:   var(--rust-light);
    --teal:         var(--patina);
    --teal-light:   var(--patina-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--copper);
    --primary-light:    var(--copper-light);
    --primary-dark:     var(--copper-dark);
    --secondary:        var(--rust);
    --secondary-light:  var(--rust-light);
    --tertiary:         var(--patina);
    --tertiary-light:   var(--patina-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #DC2626;
    --error-light:      #FEE2E2;
    --success:          #16A34A;
    --success-light:    #DCFCE7;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #FDE047;

    --grad-hero:    linear-gradient(135deg, #CA8A04 0%, #0891B2 50%, #475569 100%);
    --grad-card1:   linear-gradient(135deg, #CA8A04 0%, #A16207 100%);
    --grad-card2:   linear-gradient(135deg, #0891B2 0%, #0369A1 100%);
    --grad-card3:   linear-gradient(135deg, #475569 0%, #334155 100%);
    --grad-tonal:   linear-gradient(135deg, #FEF9C3 0%, #ECFEFF 100%);
    --grad-ambient: linear-gradient(180deg, #FEF08A 0%, #FDFDF9 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #FEF3C7 0%, #FFFFFF 55%, #ECFEFF 100%);

    --font-primary:   'Work Sans', sans-serif;
    --font-secondary: 'Cabin', sans-serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(202, 138, 4, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(202, 138, 4, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(202, 138, 4, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(202, 138, 4, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 18: ROYAL ORCHID (Majestic Plum & Gold - Commented)
   ========================================================================== */
/*
:root {
    --plum:         #701A75;
    --plum-light:   #FDF4FF;
    --plum-dark:    #4A0E4E;
    --gold:         #B45309;
    --gold-light:   #FFFBEB;
    --orchid:       #D946EF;
    --orchid-light: #FDF4FF;
    --amber:        #D97706;
    --amber-light:  #FEF3C7;
    --ink:          #2A082C;
    --ink-soft:     #581C5C;
    --muted:        #701A75;
    --border:       #F5D0FE;
    --surface:      #FFF9FF;
    --white:        #FFFFFF;

    --iris:         var(--plum);
    --iris-light:   var(--plum-light);
    --iris-dark:    var(--plum-dark);
    --rose:         var(--gold);
    --rose-light:   var(--gold-light);
    --teal:         var(--orchid);
    --teal-light:   var(--orchid-light);
    --amber:        var(--amber);
    --amber-light:  var(--amber-light);

    --primary:          var(--plum);
    --primary-light:    var(--plum-light);
    --primary-dark:     var(--plum-dark);
    --secondary:        var(--gold);
    --secondary-light:  var(--gold-light);
    --tertiary:         var(--orchid);
    --tertiary-light:   var(--orchid-light);
    --warning:          var(--amber);
    --warning-light:    var(--amber-light);
    --error:            #EF4444;
    --error-light:      #FEE2E2;
    --success:          #10B981;
    --success-light:    #D1FAE5;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #F0ABFC;

    --grad-hero:    linear-gradient(135deg, #701A75 0%, #B45309 50%, #D946EF 100%);
    --grad-card1:   linear-gradient(135deg, #701A75 0%, #4A0E4E 100%);
    --grad-card2:   linear-gradient(135deg, #B45309 0%, #78350F 100%);
    --grad-card3:   linear-gradient(135deg, #D946EF 0%, #A21CAF 100%);
    --grad-tonal:   linear-gradient(135deg, #FDF4FF 0%, #FFFBEB 100%);
    --grad-ambient: linear-gradient(180deg, #F3E8FF 0%, #FFF9FF 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #FDF4FF 0%, #FFFFFF 55%, #FFFBEB 100%);

    --font-primary:   'Poppins', sans-serif;
    --font-secondary: 'Cinzel', serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(112, 26, 117, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(112, 26, 117, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(112, 26, 117, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(112, 26, 117, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 19: SAFARI EARTH (Savannah Khaki & Earth Green - Commented)
   ========================================================================== */
/*
:root {
    --bronze:       #78350F;
    --bronze-light: #FFFBEB;
    --bronze-dark:  #451A03;
    --khaki:        #CA8A04;
    --khaki-light:  #FEF9C3;
    --earth:        #3F6212;
    --earth-light:  #F7FEE7;
    --gold:         #D97706;
    --gold-light:   #FEF3C7;
    --ink:          #271A0C;
    --ink-soft:     #3F2A14;
    --muted:        #5C3D1C;
    --border:       #FEF08A;
    --surface:      #FCFCFA;
    --white:        #FFFFFF;

    --iris:         var(--bronze);
    --iris-light:   var(--bronze-light);
    --iris-dark:    var(--bronze-dark);
    --rose:         var(--khaki);
    --rose-light:   var(--khaki-light);
    --teal:         var(--earth);
    --teal-light:   var(--earth-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--bronze);
    --primary-light:    var(--bronze-light);
    --primary-dark:     var(--bronze-dark);
    --secondary:        var(--khaki);
    --secondary-light:  var(--khaki-light);
    --tertiary:         var(--earth);
    --tertiary-light:   var(--earth-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #DC2626;
    --error-light:      #FEE2E2;
    --success:          #16A34A;
    --success-light:    #DCFCE7;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #D97706;

    --grad-hero:    linear-gradient(135deg, #78350F 0%, #CA8A04 50%, #3F6212 100%);
    --grad-card1:   linear-gradient(135deg, #78350F 0%, #451A03 100%);
    --grad-card2:   linear-gradient(135deg, #CA8A04 0%, #854D0E 100%);
    --grad-card3:   linear-gradient(135deg, #3F6212 0%, #1A2E05 100%);
    --grad-tonal:   linear-gradient(135deg, #FFFBEB 0%, #F7FEE7 100%);
    --grad-ambient: linear-gradient(180deg, #FEF08A 0%, #FCFCFA 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #FFFBEB 0%, #FFFFFF 55%, #F7FEE7 100%);

    --font-primary:   'Lexend', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(120, 53, 15, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-2: 0px 2px 6px 2px rgba(120, 53, 15, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    --elevation-3: 0px 4px 8px 3px rgba(120, 53, 15, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
    --elevation-4: 0px 6px 16px 4px rgba(120, 53, 15, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.06);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 20: MOONLIGHT SILK (Minimalist Ivory & Platinum - Commented)
   ========================================================================== */
/*
:root {
    --platinum:       #475569;
    --plat-light:     #F1F5F9;
    --plat-dark:      #334155;
    --silk:           #94A3B8;
    --silk-light:     #F8FAFC;
    --onyx:           #0F172A;
    --onyx-light:     #F1F5F9;
    --gold:           #CA8A04;
    --gold-light:     #FEF9C3;
    --ink:            #0F172A;
    --ink-soft:       #1E293B;
    --muted:          #64748B;
    --border:         #CBD5E1;
    --surface:        #FAFBFD;
    --white:          #FFFFFF;

    --iris:         var(--platinum);
    --iris-light:   var(--plat-light);
    --iris-dark:    var(--plat-dark);
    --rose:         var(--silk);
    --rose-light:   var(--silk-light);
    --teal:         var(--onyx);
    --teal-light:   var(--onyx-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--platinum);
    --primary-light:    var(--plat-light);
    --primary-dark:     var(--plat-dark);
    --secondary:        var(--silk);
    --secondary-light:  var(--silk-light);
    --tertiary:         var(--onyx);
    --tertiary-light:   var(--onyx-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #DC2626;
    --error-light:      #FEE2E2;
    --success:          #16A34A;
    --success-light:    #DCFCE7;
    --text-primary:     var(--ink);
    --text-secondary:   var(--ink-soft);
    --text-muted:       var(--muted);
    --background:       var(--surface);
    --disabled:         #94A3B8;

    --grad-hero:    linear-gradient(135deg, #475569 0%, #94A3B8 50%, #0F172A 100%);
    --grad-card1:   linear-gradient(135deg, #475569 0%, #334155 100%);
    --grad-card2:   linear-gradient(135deg, #94A3B8 0%, #64748B 100%);
    --grad-card3:   linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --grad-tonal:   linear-gradient(135deg, #F1F5F9 0%, #F8FAFC 100%);
    --grad-ambient: linear-gradient(180deg, #E2E8F0 0%, #FAFBFD 60%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--grad-ambient);
    --body-gradient: linear-gradient(160deg, #F8FAFC 0%, #FFFFFF 55%, #F1F5F9 100%);

    --font-primary:   'Inter', sans-serif;
    --font-secondary: 'Outfit', sans-serif;
    --display-xl: 42px;
    --display-lg: 36px;
    --heading-lg: 28px;
    --heading-md: 24px;
    --title:      20px;
    --body-lg:    16px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   28px;
    --radius-hero: 32px;
    --radius-full: 999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0px 1px 3px 1px rgba(71, 85, 105, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
    --elevation-2: 0px 2px 6px 2px rgba(71, 85, 105, 0.07), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
    --elevation-3: 0px 4px 8px 3px rgba(71, 85, 105, 0.09), 0px 1px 3px 0px rgba(0, 0, 0, 0.03);
    --elevation-4: 0px 6px 16px 4px rgba(71, 85, 105, 0.11), 0px 2px 6px 0px rgba(0, 0, 0, 0.05);

    --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-normal: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-slow:   350ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 9: ZOHO BIGIN (Flat SaaS, Clean Blue, Crisp Typography - Commented)
   ========================================================================== */
/*
:root {
    --blue:         #005EEC;
    --blue-light:   #EAF2FD;
    --blue-dark:    #0047B8;
    --green:        #06A77D;
    --green-light:  #E8F7F3;
    --red:          #F0483E;
    --red-light:    #FEECEB;
    --yellow:       #F5B945;
    --yellow-light: #FEF8ED;
    --navy:         #111827;
    --slate:        #4B5563;
    --muted:        #9CA3AF;
    --border:       #E5E7EB;
    --surface:      #FFFFFF;
    --background:   #F3F4F6;
    --white:        #FFFFFF;

    --iris:         var(--blue);
    --iris-light:   var(--blue-light);
    --iris-dark:    var(--blue-dark);
    --rose:         var(--red);
    --rose-light:   var(--red-light);
    --teal:         var(--green);
    --teal-light:   var(--green-light);
    --amber:        var(--yellow);
    --amber-light:  var(--yellow-light);

    --primary:          var(--blue);
    --primary-light:    var(--blue-light);
    --primary-dark:     var(--blue-dark);
    --secondary:        var(--navy);
    --secondary-light:  #F3F4F6;
    --tertiary:         var(--green);
    --tertiary-light:   var(--green-light);
    --warning:          var(--yellow);
    --warning-light:    var(--yellow-light);
    --error:            var(--red);
    --error-light:      var(--red-light);
    --success:          var(--green);
    --success-light:    var(--green-light);
    --text-primary:     var(--navy);
    --text-secondary:   var(--slate);
    --text-muted:       var(--muted);
    --disabled:         #D1D5DB;

    --grad-hero:    linear-gradient(135deg, #005EEC 0%, #005EEC 100%);
    --grad-card1:   linear-gradient(135deg, #005EEC 0%, #005EEC 100%);
    --grad-card2:   linear-gradient(135deg, #111827 0%, #111827 100%);
    --grad-card3:   linear-gradient(135deg, #06A77D 0%, #06A77D 100%);
    --grad-tonal:   linear-gradient(135deg, #EAF2FD 0%, #EAF2FD 100%);
    --grad-ambient: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--background);
    --body-gradient: var(--background);

    --font-primary:   'Inter', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    --display-xl: 42px;
    --display-lg: 32px;
    --heading-lg: 24px;
    --heading-md: 20px;
    --title:      18px;
    --body-lg:    15px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   16px;
    --radius-hero: 20px;
    --radius-full: 9999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --motion-fast:   100ms ease-out;
    --motion-normal: 200ms ease-in-out;
    --motion-slow:   300ms ease-in-out;

    --viewport-width: 390px;
}
*/

/* ==========================================================================
   THEME 10: GOVERNMENT CRM (Modern SaaS Tricolor, Clean & Crisp - Commented)
   ========================================================================== */
/*
:root {
    --navy:         #0F172A;
    --navy-light:   #F1F5F9;
    --navy-dark:    #020617;
    --saffron:      #F97316;
    --saffron-light:#FFF7ED;
    --saffron-dark: #EA580C;
    --green:        #10B981;
    --green-light:  #ECFDF5;
    --green-dark:   #059669;
    --gold:         #F59E0B;
    --gold-light:   #FEF3C7;
    
    --slate:        #475569;
    --muted:        #94A3B8;
    --border:       #E2E8F0;
    --surface:      #FFFFFF;
    --background:   #F8FAFC;
    --white:        #FFFFFF;

    --iris:         var(--saffron);
    --iris-light:   var(--saffron-light);
    --iris-dark:    var(--saffron-dark);
    --rose:         var(--navy);
    --rose-light:   var(--navy-light);
    --teal:         var(--green);
    --teal-light:   var(--green-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--saffron);
    --primary-light:    var(--saffron-light);
    --primary-dark:     var(--saffron-dark);
    --secondary:        var(--navy);
    --secondary-light:  var(--navy-light);
    --tertiary:         var(--green);
    --tertiary-light:   var(--green-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            #EF4444;
    --error-light:      #FEF2F2;
    --success:          var(--green);
    --success-light:    var(--green-light);
    
    --text-primary:     var(--navy);
    --text-secondary:   var(--slate);
    --text-muted:       var(--muted);
    --disabled:         #CBD5E1;

    --grad-hero:    linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    --grad-card1:   linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    --grad-card2:   linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --grad-card3:   linear-gradient(135deg, #10B981 0%, #059669 100%);
    --grad-tonal:   linear-gradient(135deg, #FFF7ED 0%, #FFF7ED 100%);
    --grad-ambient: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    --ambient-background: var(--background);
    --body-gradient: var(--background);

    --font-primary:   'Mukta', sans-serif;
    --font-secondary: 'Laila', serif;
    --display-xl: 40px;
    --display-lg: 32px;
    --heading-lg: 24px;
    --heading-md: 20px;
    --title:      18px;
    --body-lg:    15px;
    --body-md:    14px;
    --caption:    12px;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-hero: 20px;
    --radius-full: 9999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --motion-fast:   100ms ease-out;
    --motion-normal: 200ms ease-in-out;
    --motion-slow:   300ms ease-in-out;

    --viewport-width: 390px;
}
*/


/* ==========================================================================
   THEME 12: VIBRANT MULTICOLOR (Red Logo Optimized, Poppins - Active)
   ========================================================================== */
:root {
    --brand-primary:   #E11D48; /* Vibrant Rose Red (Matches Logo) */
    --brand-secondary: #F43F5E; /* Bright Pinkish Red */
    --brand-accent:    #8B5CF6; /* Stunning Purple */
    --brand-success:   #10B981; /* Fresh Emerald */
    --brand-error:     #EF4444; /* Standard Red */
    
    --navy:         #0F172A;
    --navy-light:   #F8FAFC;
    --navy-dark:    #020617;
    --saffron:      var(--brand-primary);
    --saffron-light:#FFE4E6;
    --saffron-dark: #BE123C;
    --green:        var(--brand-success);
    --green-light:  #D1FAE5;
    --gold:         #F59E0B;
    --gold-light:   #FEF3C7;
    
    --slate:        #64748B;
    --muted:        #CBD5E1;
    --border:       rgba(225, 29, 72, 0.15); /* Tinted red border */
    --surface:      #FFFFFF;
    --background:   #FAFAFA;
    --white:        #FFFFFF;

    --iris:         var(--brand-accent);
    --iris-light:   #EDE9FE;
    --iris-dark:    #6D28D9;
    --rose:         var(--brand-primary);
    --rose-light:   var(--saffron-light);
    --teal:         var(--brand-success);
    --teal-light:   var(--green-light);
    --amber:        var(--gold);
    --amber-light:  var(--gold-light);

    --primary:          var(--brand-primary);
    --primary-light:    var(--saffron-light);
    --primary-dark:     var(--saffron-dark);
    --secondary:        var(--navy);
    --secondary-light:  var(--navy-light);
    --tertiary:         var(--brand-accent);
    --tertiary-light:   var(--iris-light);
    --warning:          var(--gold);
    --warning-light:    var(--gold-light);
    --error:            var(--brand-error);
    --error-light:      #FEE2E2;
    --success:          var(--brand-success);
    --success-light:    var(--green-light);
    
    --text-primary:     #0F172A;
    --text-secondary:   #475569;
    --text-muted:       #94A3B8;
    --disabled:         #E2E8F0;

    /* Stunning Vibrant Multicolor Gradients */
    --grad-hero:    linear-gradient(135deg, #E11D48 0%, #F43F5E 50%, #8B5CF6 100%);
    --grad-card1:   linear-gradient(135deg, #E11D48 0%, #F43F5E 100%);
    --grad-card2:   linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --grad-card3:   linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    --grad-tonal:   linear-gradient(135deg, #FFE4E6 0%, #EDE9FE 100%);
    
    /* Multicolored Pastel Mesh for the Background! */
    --grad-ambient: linear-gradient(180deg, #FFF1F2 0%, #F5F3FF 50%, #EFF6FF 100%);
    
    --hero-gradient: var(--grad-hero);
    --card-gradient-1: var(--grad-card1);
    --card-gradient-2: var(--grad-card2);
    --card-gradient-3: var(--grad-card3);
    
    --ambient-background: var(--grad-ambient);
    --body-gradient: var(--grad-ambient);

    /* Typography - Poppins for everything. Clean, modern, round, Devanagari supported! */
    --font-primary:   'Poppins', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --display-xl: 40px;
    --display-lg: 32px;
    --heading-lg: 26px;
    --heading-md: 20px;
    --title:      18px;
    --body-lg:    15px;
    --body-md:    14px;
    --caption:    12px;

    /* Crisp SaaS radii */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-hero: 20px;
    --radius-full: 9999px;

    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    /* Sharp, crisp shadow matching the vibrant pink/red */
    --elevation-1: 0 2px 4px rgba(225, 29, 72, 0.05);
    --elevation-2: 0 4px 10px rgba(225, 29, 72, 0.08), 0 2px 4px rgba(0,0,0,0.02);
    --elevation-3: 0 10px 20px rgba(225, 29, 72, 0.12), 0 4px 8px rgba(0,0,0,0.04);
    --elevation-4: 0 20px 40px rgba(225, 29, 72, 0.15), 0 10px 20px rgba(0,0,0,0.06);

    --motion-fast:   150ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-normal: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-slow:   350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    --viewport-width: 390px;
}