/* ==========================================================================
   ClearMedUk - Global Design Tokens & Theme Variables
   --------------------------------------------------------------------------
   Change these variables in ONE SINGLE PLACE to recolor and rebrand the
   entire website instantly.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   1. ACTIVE THEME COLORS (Main Brand Palette)
   ========================================================================== */
:root {
  --primary-color: #8B3E8F;          /* Main Brand Color (Buttons, Links, Active States) */
  --primary-hover: #752E79;          /* Darker hover state for primary elements */
  --secondary-color: #E8577A;        /* Secondary Accent (Gradient midpoint, Badges) */
  --accent-color: #E9804B;           /* Tertiary Warm Accent (Gradient end) */
  
  --dark-color: #3A2743;             /* Dark Sections (Top Bar, Value Strip, Footer, Headings) */
  --dark-heading: #FFFFFF;           /* Heading text inside dark sections */
  
  --bg-color: #FFFDFB;               /* Main Page Background */
  --card-bg: #FFFDFB;                /* Card & Container Background */
  --section-bg-light: #FBF6F4;       /* Soft Light Section Background (Hero, Reviews, etc.) */

  /* ========================================================================
     AUTOMATICALLY COMPUTED VALUES (All elements link back to the main colors)
     ======================================================================== */
  --brand-gradient: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 55%, var(--accent-color) 100%);
  --brand-gradient-hover: linear-gradient(120deg, var(--primary-hover) 0%, color-mix(in srgb, var(--secondary-color) 90%, black) 55%, color-mix(in srgb, var(--accent-color) 90%, black) 100%);
  --brand-glow: color-mix(in srgb, var(--primary-color) 28%, transparent);
  --brand-subtle: color-mix(in srgb, var(--primary-color) 10%, transparent);

  /* Surface & Background References */
  --bg-main: var(--bg-color);
  --bg-card: var(--card-bg);
  --bg-secondary: var(--section-bg-light);

  /* Borders & Focus */
  --border: color-mix(in srgb, var(--dark-color) 12%, transparent);
  --border-light: color-mix(in srgb, var(--dark-color) 6%, transparent);
  --border-focus: var(--primary-color);

  /* Text & Foreground */
  --text-main: var(--dark-color);
  --text-muted: color-mix(in srgb, var(--dark-color) 70%, white);
  --text-light: color-mix(in srgb, var(--dark-color) 45%, white);
  --text-inverse: #FFFFFF;

  /* Pastel Wellness Accent Tints */
  --tint-rose: #F7DFDF;
  --tint-sage: #DFE7DC;
  --tint-sage-text: #235427;
  --tint-lilac: #E7DAEA;
  --tint-gold: #CCA04A;

  /* Dark Contrast Sections */
  --dark-bg: var(--dark-color);
  --dark-text: color-mix(in srgb, var(--dark-color) 10%, white);
  --dark-muted: color-mix(in srgb, var(--dark-color) 35%, white);
  --dark-border: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  /* Type scale (rem relative to html root) */
  --text-xs: 0.75rem;      /* 12px @ 16 / ~11.25 @ 15 */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.875rem;   /* 14px — default body */
  --text-md: 0.9375rem;    /* 15px */
  --text-lg: 1rem;         /* 16px */
  --fs-h1: clamp(1.65rem, 2.8vw + 0.45rem, 2.65rem);
  --fs-h2: clamp(1.35rem, 2vw + 0.35rem, 1.95rem);
  --fs-h3: clamp(1.05rem, 1.2vw + 0.25rem, 1.3rem);
  --fs-h4: clamp(0.95rem, 0.8vw + 0.2rem, 1.1rem);
  --fs-body: clamp(0.875rem, 0.25vw + 0.8rem, 0.95rem);
  --fs-lead: clamp(0.9rem, 0.3vw + 0.82rem, 1rem);

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px color-mix(in srgb, var(--dark-color) 5%, transparent);
  --shadow-md: 0 10px 25px -5px color-mix(in srgb, var(--dark-color) 8%, transparent);
  --shadow-lg: 0 20px 40px -15px color-mix(in srgb, var(--dark-color) 14%, transparent);
  --shadow-xl: 0 30px 60px -25px color-mix(in srgb, var(--dark-color) 28%, transparent);
  --shadow-glow: 0 12px 30px var(--brand-glow);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Buttons — compact pill size (site-wide) */
  --btn-min-height: 38px;
  --btn-padding-y: 0.45rem;
  --btn-padding-x: 1.2rem;
  --btn-font-size: 0.8125rem;
  --btn-font-weight: 600;
  --btn-gap: 0.35rem;
}

/* ==========================================================================
   2. PRE-DEFINED BACKUP THEME COLOR PALETTES
   ========================================================================== */

/* BACKUP 1: EMERALD HEALTH & MINT WELLNESS */
[data-theme="emerald"] {
  --primary-color: #0D7A68;
  --primary-hover: #085A4D;
  --secondary-color: #10B981;
  --accent-color: #F59E0B;
  --dark-color: #0F2D25;
  --dark-heading: #FFFFFF;
  --bg-color: #FBFDFB;
  --card-bg: #FFFFFF;
  --section-bg-light: #F0F7F4;
}

/* BACKUP 2: ROYAL SAPPHIRE & OCEAN CYAN */
[data-theme="sapphire"] {
  --primary-color: #1D5ED6;
  --primary-hover: #1446A8;
  --secondary-color: #06B6D4;
  --accent-color: #3B82F6;
  --dark-color: #0A162C;
  --dark-heading: #FFFFFF;
  --bg-color: #FAFCFF;
  --card-bg: #FFFFFF;
  --section-bg-light: #F0F5FD;
}

/* BACKUP 3: LUXURY ROSE & CRIMSON VELVET */
[data-theme="rose"] {
  --primary-color: #A21CAF;
  --primary-hover: #86198F;
  --secondary-color: #E11D48;
  --accent-color: #FB923C;
  --dark-color: #2B0715;
  --dark-heading: #FFFFFF;
  --bg-color: #FFFDFE;
  --card-bg: #FFFFFF;
  --section-bg-light: #FDF2F4;
}

/* BACKUP 4: SCANDINAVIAN SAGE & WARM GOLD */
[data-theme="sage"] {
  --primary-color: #2E6F5E;
  --primary-hover: #225346;
  --secondary-color: #C27803;
  --accent-color: #E3A008;
  --dark-color: #1B2A26;
  --dark-heading: #FFFFFF;
  --bg-color: #FAFAF8;
  --card-bg: #FFFFFF;
  --section-bg-light: #F3F4F0;
}

/* BACKUP 5: SLEEK MIDNIGHT & ELECTRIC VIOLET */
[data-theme="midnight"] {
  --primary-color: #7C3AED;
  --primary-hover: #6D28D9;
  --secondary-color: #EC4899;
  --accent-color: #F97316;
  --dark-color: #18181B;
  --dark-heading: #FFFFFF;
  --bg-color: #FAFAFA;
  --card-bg: #FFFFFF;
  --section-bg-light: #F4F4F5;
}

/* BACKUP 6: OCEAN TEAL & MARINE AQUA */
[data-theme="teal"] {
  --primary-color: #0E7490;
  --primary-hover: #083344;
  --secondary-color: #06B6D4;
  --accent-color: #14B8A6;
  --dark-color: #082F49;
  --dark-heading: #FFFFFF;
  --bg-color: #F8FAFC;
  --card-bg: #FFFFFF;
  --section-bg-light: #ECFEFF;
}

/* BACKUP 7: WARM TERRACOTTA & SUNLIT AMBER */
[data-theme="terracotta"] {
  --primary-color: #C2410C;
  --primary-hover: #9A3412;
  --secondary-color: #EA580C;
  --accent-color: #F59E0B;
  --dark-color: #292524;
  --dark-heading: #FFFFFF;
  --bg-color: #FAFAF9;
  --card-bg: #FFFFFF;
  --section-bg-light: #FFF7ED;
}

/* BACKUP 8: ROYAL AMETHYST & LAVENDER LILAC */
[data-theme="amethyst"] {
  --primary-color: #6D28D9;
  --primary-hover: #5B21B6;
  --secondary-color: #8B5CF6;
  --accent-color: #EC4899;
  --dark-color: #1E1B4B;
  --dark-heading: #FFFFFF;
  --bg-color: #FAF5FF;
  --card-bg: #FFFFFF;
  --section-bg-light: #F3E8FF;
}

/* BACKUP 9: CORAL SUNSET & PEACH BLOSSOM */
[data-theme="sunset"] {
  --primary-color: #E11D48;
  --primary-hover: #BE123C;
  --secondary-color: #F97316;
  --accent-color: #FBBF24;
  --dark-color: #1C1917;
  --dark-heading: #FFFFFF;
  --bg-color: #FFFDFB;
  --card-bg: #FFFFFF;
  --section-bg-light: #FFF1F2;
}

/* BACKUP 10: BOTANICAL FOREST & FRESH MOSS */
[data-theme="forest"] {
  --primary-color: #15803D;
  --primary-hover: #166534;
  --secondary-color: #65A30D;
  --accent-color: #D97706;
  --dark-color: #052E16;
  --dark-heading: #FFFFFF;
  --bg-color: #FBFDFB;
  --card-bg: #FFFFFF;
  --section-bg-light: #F0FDF4;
}

/* BACKUP 11: COBALT BLUE & SKY AZURE */
[data-theme="cobalt"] {
  --primary-color: #2563EB;
  --primary-hover: #1D4ED8;
  --secondary-color: #38BDF8;
  --accent-color: #818CF8;
  --dark-color: #0F172A;
  --dark-heading: #FFFFFF;
  --bg-color: #F8FAFC;
  --card-bg: #FFFFFF;
  --section-bg-light: #EFF6FF;
}

/* BACKUP 12: EARTHY BRONZE & CHAMPAGNE GOLD */
[data-theme="bronze"] {
  --primary-color: #92400E;
  --primary-hover: #78350F;
  --secondary-color: #D97706;
  --accent-color: #F59E0B;
  --dark-color: #27272A;
  --dark-heading: #FFFFFF;
  --bg-color: #FAF8F5;
  --card-bg: #FFFFFF;
  --section-bg-light: #FDF6EE;
}

/* BACKUP 13: NORDIC GLACIER & ICE SLATE */
[data-theme="glacier"] {
  --primary-color: #475569;
  --primary-hover: #334155;
  --secondary-color: #0284C7;
  --accent-color: #38BDF8;
  --dark-color: #0F172A;
  --dark-heading: #FFFFFF;
  --bg-color: #F8FAFC;
  --card-bg: #FFFFFF;
  --section-bg-light: #F1F5F9;
}

/* BACKUP 14: RUBY CRIMSON & VELVET MAUVE */
[data-theme="crimson"] {
  --primary-color: #9F1239;
  --primary-hover: #881337;
  --secondary-color: #E11D48;
  --accent-color: #F43F5E;
  --dark-color: #1F1318;
  --dark-heading: #FFFFFF;
  --bg-color: #FFFDFE;
  --card-bg: #FFFFFF;
  --section-bg-light: #FFE4E6;
}

/* BACKUP 15: TUSCAN OLIVE & GOLDEN HARVEST */
[data-theme="olive"] {
  --primary-color: #4D7C0F;
  --primary-hover: #3F6212;
  --secondary-color: #84CC16;
  --accent-color: #EAB308;
  --dark-color: #142207;
  --dark-heading: #FFFFFF;
  --bg-color: #FCFDF7;
  --card-bg: #FFFFFF;
  --section-bg-light: #F7FEE7;
}