/* ==========================================================================
   CSS Design System — EndoBrace Dental Clinic (Dadar West, Mumbai)
   Master Palette: "Atelier Dental Luxury"
   Deep Royal Navy (#0A192F) · Champagne Gold (#D4AF37) · Crisp Porcelain (#F8FAFC)
   Zero Framework / Zero Build Dependencies / Pure Native Standards
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

:root {
  /* ========================================================================
     "Atelier Dental Luxury" Master Palette Tokens
     ======================================================================== */
  /* Deep Royal Navy Suite (Primary Brand Base, Header, High-Contrast Typography) */
  --navy: #0A192F;             /* Deep authoritative medical navy */
  --navy-dark: #061120;        /* Deepest obsidian navy for topbar & subfooter */
  --navy-surface: #10243E;     /* Elevated navy surface for dark cards */
  --navy-hover: #163254;       /* Interactive navy hover */
  --navy-tint: rgba(10, 25, 47, 0.05); /* Softest navy tint */
  --navy-border: rgba(10, 25, 47, 0.12);

  /* Champagne Gold & Warm Amber Suite (Luxury Dental Aesthetics) */
  --gold: #D4AF37;             /* Rich polished gold */
  --gold-champagne: #C5A880;   /* Muted champagne tone */
  --gold-light: #F5E8D3;       /* Delicate gold highlight */
  --gold-dark: #9E7D3B;        /* High-contrast gold for text on light backgrounds */
  --gold-glow: rgba(212, 175, 55, 0.4);
  --gold-tint: rgba(212, 175, 55, 0.12);
  --accent: #D4AF37;           /* Unified primary accent token */
  --accent-hover: #B89358;

  /* Pure Porcelain & Luminous Surfaces (Reflecting Clinic Wall Marble & Alabaster) */
  --porcelain: #FAF8F5;        /* Warm alabaster cream matching clinic reception walls */
  --surface-white: #FFFFFF;    /* Pure crisp card surface */
  --surface-alt: #F3EFEA;      /* Warm ivory secondary container matching clinic cabinetry */
  --border-light: rgba(10, 25, 47, 0.08);
  --border-gold: rgba(197, 168, 128, 0.4);

  /* High-Legibility Typography Tokens */
  --text-primary: #0A192F;     /* Rich navy for highest contrast */
  --text-secondary: #334155;   /* Deep slate for body paragraphs */
  --text-muted: #64748B;       /* Refined slate for captions and subtext */
  --text-light: #F8FAFC;       /* Off-white text on dark backgrounds */
  --text-gold: #D4AF37;

  /* Verified Trust Accents */
  --success-green: #0D9488;    /* Modern clinical emerald */
  --success-light: #CCFBF1;
  --star-gold: #F59E0B;        /* 5-star rating vibrant gold */

  /* Legacy & Semantic Variable Mappings for 100% Compatibility */
  --pine-green: var(--navy);
  --pine-green-dark: var(--navy-dark);
  --pine-green-deep: var(--navy-dark);
  --pine-green-hover: var(--navy-hover);
  --warm-ivory: var(--porcelain);
  --warm-ivory-light: var(--surface-white);
  --warm-ivory-alt: var(--surface-alt);
  --soft-sage: #E2E8F0;
  --soft-sage-light: var(--surface-alt);
  --soft-sage-border: var(--border-light);
  --apricot: var(--gold);
  --apricot-hover: var(--accent-hover);
  --apricot-dark: var(--gold-dark);
  --apricot-glow: var(--gold-glow);
  --charcoal-green: var(--text-primary);
  --charcoal-muted: var(--text-muted);
  --white: #FFFFFF;
  --dark-blue: var(--navy);
  --royal-blue: var(--navy);
  --linen-light: var(--porcelain);
  --linen-2: var(--soft-sage);
  --linen: var(--border-light);
  --tan: var(--gold-champagne);
  --tan-2: var(--gold);
  --dim-grey: var(--text-muted);

  /* Modern Font Stacks */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Smooth Physics Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout Dimensions */
  --container-max: 1240px;
  --navbar-height: 82px;
}

/* Universal Box Sizing & Fluid Resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

body {
  font-family: var(--font-sans);
  color: var(--text-secondary);
  background-color: var(--porcelain);
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Global SVG Safety Reset — Prevents Any SVG From Blowing Up In Size */
svg {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  flex-shrink: 0;
}

/* Semantic Typography Hierarchy — High Contrast & Razor Sharp */
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: #0A192F;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 700; }
h4 { font-size: 1.2rem; font-weight: 700; }

/* Dark Container Heading Overrides — Never Black/Navy on Dark */
:is(.hero-section, .hero-compact, .site-header, .site-footer, .fullscreen-menu, .dark-section, [data-theme="dark"], .bg-navy, .bg-dark) :is(h1, h2, h3, h4, h5, h6),
:is(h1, h2, h3, h4, h5, h6).text-white,
:is(h1, h2, h3, h4, h5, h6).text-light {
  color: #FFFFFF !important;
}

p {
  margin-block-end: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

:is(ul, ol) {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:is(button, input, textarea, select) {
  font-family: inherit;
}

/* Core Container & Utility Classes */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

.section-padding {
  padding-block: clamp(60px, 7vw, 100px);
}

.text-center {
  text-align: center;
}

.gold-accent {
  color: var(--gold);
}

.uppercase-eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--gold-dark);
  display: inline-block;
  margin-block-end: 12px;
}