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

/* ==========================================================
   THEME 01 — 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
   ========================================================== */
[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 — GOLD
   ========================================================== */
[data-theme="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 — CREAM
   ========================================================== */
[data-theme="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);
}


/* ==========================================================
   THEME 05 — BURGUNDY
   ========================================================== */

[data-theme="burgundy"] {

   --color-primary: #7A1538;
   --color-primary-dark: #540B25;
   --color-primary-light: #F5E4E9;

   --color-secondary: #3D1826;
   --color-secondary-dark: #260D16;
   --color-secondary-light: #EBD9DF;

   --color-accent: #C49A54;
   --color-accent-light: #F3E6CF;

   --color-success: #27865A;
   --color-warning: #D08A20;
   --color-danger: #C62828;
   --color-info: #3B82A0;

   --color-background: #F7F2F3;
   --color-surface: #FFFCFC;
   --color-white: #FFFFFF;

   --text-primary: #28151C;
   --text-secondary: #60444E;
   --text-muted: #8B737B;
   --text-white: #FFFFFF;
   --text-link: #7A1538;

   /* Navigation */
   --nav-background: #FFFFFF;
   --nav-text: #28151C;
   --nav-text-hover: #7A1538;
   --nav-border: #E9DADC;

   /* Cards */
   --card-background: #FFFFFF;
   --card-text: #60444E;
   --card-heading: #28151C;
   --card-border: #E8DADC;

   /* Borders / Inputs */
   --border-color: #E4D5D9;
   --input-border: #D8C4CA;
   --input-focus: #7A1538;

   --input-focus-shadow:
      rgba(122, 21, 56, 0.14);

   --form-input-background: #FFFAFB;

   --form-border:
      rgba(122, 21, 56, 0.22);

   /* Sections */
   --section-background: #F7F2F3;
   --section-background-alt: #FFFCFC;

   /* Decorative glow */
   --decor-glow-1:
      rgba(122, 21, 56, 0.10);

   --decor-glow-2:
      rgba(196, 154, 84, 0.10);

   /* Hero */
   --hero-background: #260D16;

   --hero-overlay-start:
      rgba(38, 13, 22, 0.35);

   --hero-overlay-end:
      rgba(84, 11, 37, 0.52);

   --hero-content-background:
      rgba(255, 255, 255, 0.08);

   --hero-content-border:
      rgba(255, 255, 255, 0.16);

   /* CTA */
   --cta-primary: #ED1C24;
   --cta-primary-hover: #C60309;
   --cta-text: #FFFFFF;

   /* Product highlights */
   --medical-amount: #C62828;
   --hibah-amount: #7A1538;

   /* Warning */
   --warning-background: #FFF5E8;
   --warning-border: #D08A20;
   --warning-icon: #B87515;

   /* Contact */
   --contact-background: #540B25;
   --contact-text: #FFFFFF;

   --contact-shadow:
      rgba(84, 11, 37, 0.28);

   /* Form steps */
   --form-step-background: #F5E4E9;
   --form-step-text: #7A1538;

   /* Misc */
   --highlight-danger: #C62828;
}


/* ==========================================================
   THEME 06 — EMERALD
   ========================================================== */

[data-theme="emerald"] {

   --color-primary: #086B58;
   --color-primary-dark: #064C40;
   --cooor-primary-light: #DDF2EC;

   --color-secondary: #183F37;
   --color-secondary-dark: #102C27;
   --color-secondary-light: #D7E7E2;

   --color-accent: #C6A15B;
   --color-accent-light: #F2E7D0;

   --color-success: #16835D;
   --color-warning: #D18B21;
   --color-danger: #D13B3B;
   --color-info: #198BAD;

   --color-background: #F2F7F5;
   --color-surface: #FCFEFD;
   --color-white: #FFFFFF;

   --text-primary: #102D27;
   --text-secondary: #435F58;
   --text-muted: #70837E;
   --text-white: #FFFFFF;
   --text-link: #086B58;

   /* Navigation */
   --nav-background: #FFFFFF;
   --nav-text: #102D27;
   --nav-text-hover: #086B58;
   --nav-border: #D9E5E1;

   /* Cards */
   --card-background: #FF*FFF;
   --card-text: #435F58;
   --card-heading: #102D27;
   --card-border: #DCE7E3;

   /* Borders / Inputs */
   --border-color: #D6E3DF;
   --input-border: #C7D8D3;
   --input-focus: #086B58;

   --input-focus-shadow:
      rgba(8, 107, 88, 0.14);

   --form-input-background: #F8FCFA;

   --form-border:
      rgba(8, 107, 88, 0.22);

   /* Sections */
   --section-background: #F2F7F5;
   --section-background-alt: #FCFEFD;

   /* Decorative glow */
   --decor-glow-1:
      rgba(8, 107, 88, 0.10);

   --decor-glow-2:
      rgba(198, 161, 91, 0.10);

   /* Hero */
   --hero-background: #0B2822;

   --hero-overlay-start:
      rgba(11, 40, 34, 0.34);

   --hero-overlay-end:
      rgba(6, 76, 64, 0.50);

   --hero-content-background:
      rgba(255, 255, 255, 0.08);

   --hero-content-border:
      rgba(255, 255, 255, 0.16);

   /* CTA */
   --cta-primary: #ED1C24;
   --cta-primary-hover: #C60309;
   --cta-text: #FFFFFF;

   /* Product highlights */
   --medical-amount: #D13B3B;
   --hibah-amount: #086B58;

   /* Warning */
   --warning-background: #FFF6E7;
   --warning-border: #D18B21;
   --warning-icon: #B97713;

   /* Contact */
   --contact-background: #102C27;
   --contact-text: #FFFFFF;

   --contact-shadow:
      rgba(16, 44, 39, 0.26);

   /* Form steps */
   --form-step-background: #DDF2EC;
   --form-step-text: #086B58;

   /* Misc */
   --highlight-danger: #D13B3B;
}


.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);
}