/* ==========================================================
   THEMES.CSS
   Colour-only theme system for the landing page.
   Layout, spacing, typography and component structure remain
   in style.css.
   ========================================================== */

/* ==========================================================
   THEME 01 — CURRENT TEAL
   ========================================================== */
:root,
[data-theme="teal"] {
   --color-primary: #00A79D;
   --color-primary-dark: #00857D;
   --color-primary-light: #D9F7F4;
   --color-secondary: #8B1E3F;
   --color-secondary-dark: #6F1732;
   --color-secondary-light: #F8E8ED;
   --color-accent: #D4AF37;
   --color-accent-light: #F7E7A1;
   --color-success: #22C55E;
   --color-warning: #F59E0B;
   --color-danger: #EF4444;
   --color-info: #0EA5E9;
   --color-background: #F8FAFC;
   --color-surface: #FFFFFF;
   --color-white: #FFFFFF;
   --text-primary: #111827;
   --text-secondary: #4B5563;
   --text-muted: #6B7280;
   --text-white: #FFFFFF;
   --text-link: var(--color-primary);
   --border-color: #E5E7EB;
   --input-border: #D1D5DB;
   --input-focus: var(--color-primary);
   --input-focus-shadow: rgba(0, 167, 157, .12);
   --form-input-background: #F8FAFC;
   --form-border: rgba(0, 167, 157, .25);
   --section-background: #FFFFFF;
   --section-background-alt: #F8FAFC;
   --hero-background: #0F172A;
   --hero-overlay-start: rgba(15, 23, 42, .35);
   --hero-overlay-end: rgba(15, 23, 42, .45);
   --hero-content-background: rgba(255, 255, 255, .08);
   --hero-content-border: rgba(255, 255, 255, .18);
   --cta-primary: #ED1C24;
   --cta-primary-hover: #C60309;
   --warning-background: #FFF6E9;
   --warning-border: #F59E0B;
   --warning-icon: #F59E0B;
   --highlight-danger: #D40007;
   --medical-amount: #fe1100;
   --hibah-amount: #00A79D;
   --contact-background: var(--color-primary);
   --contact-shadow: rgba(0, 167, 157, .30);
   --form-step-background: var(--color-primary-light);
   --form-step-text: var(--color-primary);
}

/* ==========================================================
   THEME 02 — BLUE / MODERN
   ========================================================== */
[data-theme="blue"] {
   --color-primary: #163B65;
   --color-primary-dark: #1D4ED8;
   --color-primary-light: #E0EDFF;
   --color-secondary: #0F766E;
   --color-secondary-dark: #115E59;
   --color-secondary-light: #CCFBF1;
   --color-accent: #0F9F9A;
   --color-accent-light: #DDF5F3;
   --color-success: #16A34A;
   --color-warning: #D97706;
   --color-danger: #DC2626;
   --color-info: #0284C7;
   --color-background: #F8FAFC;
   --color-surface: #FFFFFF;
   --color-white: #FFFFFF;
   --text-primary: #0F172A;
   --text-secondary: #475569;
   --text-muted: #64748B;
   --text-white: #FFFFFF;
   --text-link: var(--color-primary);
   --border-color: #E2E8F0;
   --input-border: #CBD5E1;
   --input-focus: var(--color-primary);
   --input-focus-shadow: rgba(37, 99, 235, .14);
   --form-input-background: #F8FAFC;
   --form-border: rgba(37, 99, 235, .24);
   --section-background: #F4F8FC;
   --section-background-alt: #FFFFFF;
   --hero-background: #0F2A52;
   --hero-overlay-start: rgba(15, 42, 82, .35);
   --hero-overlay-end: rgba(15, 42, 82, .48);
   --hero-content-background: rgba(255, 255, 255, .08);
   --hero-content-border: rgba(255, 255, 255, .18);
   --cta-primary: #ED1C24;
   --cta-primary-hover: #C60309;
   --warning-background: #FFF7ED;
   --warning-border: #F59E0B;
   --warning-icon: #D97706;
   --highlight-danger: #1D4ED8;
   --medical-amount: #DC2626;
   --hibah-amount: #2563EB;
   --contact-background: var(--color-primary);
   --contact-shadow: rgba(37, 99, 235, .28);
   --form-step-background: var(--color-primary-light);
   --form-step-text: var(--color-primary);
}

/* ==========================================================
   THEME 03 — DARK GOLD
   ========================================================== */
[data-theme="dark-gold"] {
   --color-primary: #C9A227;
   --color-primary-dark: #9A7715;
   --color-primary-light: #E8D28A;
   --color-secondary: #5A4630;
   --color-secondary-dark: #302519;
   --color-secondary-light: #D8C6A5;
   --color-accent: #D4AF37;
   --color-accent-light: #F1E4B8;
   --color-background: #EFE7D8;
   --color-surface: #FFFDF8;
   --color-white: #FFFFFF;
   --text-primary: #302519;
   --text-secondary: #5F513F;
   --text-muted: #897B67;
   --text-white: #FFFFFF;
   --text-link: #B08A1A;
   --nav-background: #FFFFFF;
   --nav-text: #302519;
   --nav-text-hover: #B08A1A;
   --nav-border: #DED3C0;
   --card-background: #FFFDF8;
   --card-text: #5F513F;
   --card-heading: #302519;
   --card-border: #DED3C0;
   --border-color: #D8CCB8;
   --input-border: #CFC1AA;
   --input-focus: #B08A1A;
   --input-focus-shadow: rgba(176, 138, 26, 0.18);
   --form-input-background: #FFFDF8;
   --form-border: #D8CCB8;
   --section-background: #EFE7D8;
   --section-background-alt: #F8F3E9;
   --cta-primary: #ED1C24;
   --cta-primary-hover: #C60309;
   --cta-text: #FFFFFF;
   --medical-amount: #D40007;
   --hibah-amount: #9A7715;
   --warning-background: #F5EBCF;
   --warning-border: #C9A227;
   --warning-icon: #B08A1A;
   --contact-background: #302519;
   --contact-text: #FFFFFF;
   --contact-shadow: rgba(48, 37, 25, 0.25);
}

/* ==========================================================
   THEME 04 — GOLD + CREAM
   ========================================================== */
[data-theme="gold-cream"] {
   --color-primary: #B88618;
   --color-primary-dark: #916B12;
   --color-primary-light: #F3E5BE;
   --color-secondary: #6B5540;
   --color-secondary-dark: #443527;
   --color-secondary-light: #E9DDCC;
   --color-accent: #D4A72C;
   --color-accent-light: #F7EED3;
   --color-background: #F6F0E4;
   --color-surface: #FFFDF8;
   --color-white: #FFFFFF;
   --text-primary: #2B241C;
   --text-secondary: #625648;
   --text-muted: #8A7A68;
   --text-white: #FFFFFF;
   --text-link: #B88618;
   --nav-background: #FFFFFF;
   --nav-text: #40362C;
   --nav-text-hover: #B88618;
   --nav-border: #E8DFD2;
   --card-background: #FFFFFF;
   --card-text: #625648;
   --card-heading: #2B241C;
   --card-border: #E8DFD2;
   --border-color: #E3D8C7;
   --input-border: #D8CCBB;
   --input-focus: #B88618;
   --input-focus-shadow: rgba(184, 134, 24, 0.15);
   --form-input-background: #FFFDF8;
   --form-border: #E3D8C7;
   --section-background: #F6F0E4;
   --section-background-alt: #FFFDF8;
   --decor-glow-1: rgba(184, 134, 24, 0.10);
   --decor-glow-2: rgba(218, 191, 124, 0.14);
   --cta-primary: #ED1C24;
   --cta-primary-hover: #C60309;
   --cta-text: #FFFFFF;
   --medical-amount: #D40007;
   --hibah-amount: #B88618;
   --warning-background: #FBF4DF;
   --warning-border: #D4A72C;
   --warning-icon: #B88618;
   --contact-background: #443527;
   --contact-text: #FFFFFF;
   --contact-shadow: rgba(68, 53, 39, 0.20);
}

.decorative-section {
   position: relative;
   overflow: hidden;

   background:
      radial-gradient(circle at 0% 0%,
         var(--decor-glow-1),
         transparent 32%),
      radial-gradient(circle at 100% 100%,
         var(--decor-glow-2),
         transparent 30%),
      var(--section-background);
}