/* ==========================================================================
   Trend Dental Clinic — Design Tokens
   ========================================================================== */

:root {
  /* ---- Brand Colors ---- */
  --color-primary: #1E4E9C;
  --color-primary-dark: #123568;
  --color-secondary: #1FBFC0;
  --gradient-primary: linear-gradient(135deg, #1E4E9C 0%, #1FBFC0 100%);

  --color-bg-cream: #F3EFE6;
  --color-bg-white: #FFFFFF;
  --color-bg-tint: #EAF1FA;

  --color-text-dark: #1E2530;
  --color-text-muted: #5C6672;
  --color-text-on-dark: #F3EFE6;
  --color-text-on-dark-muted: #AEB8C9;

  --color-success: #2FA86A;
  --color-border: #E7E2D6;
  --color-border-dark: rgba(255, 255, 255, 0.12);

  --color-star: #F5A623;
  --color-whatsapp: #25D366;
  --color-overlay-dark: rgba(18, 22, 30, 0.55);
  --color-overlay-dark-strong: rgba(14, 22, 38, 0.72);

  /* ---- Typography ---- */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.5vw + 1rem, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-heading: 1.2;
  --lh-body: 1.65;

  /* ---- Spacing Scale ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(30, 37, 48, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 37, 48, 0.10);
  --shadow-lg: 0 16px 40px rgba(30, 37, 48, 0.14);
  --shadow-float: 0 20px 50px rgba(18, 53, 104, 0.18);

  /* ---- Transitions ---- */
  --transition-fast: 0.18s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 860px;
  --header-height: 84px;
  --header-height-scrolled: 68px;

  /* ---- Z-Index Layers ---- */
  --z-header: 1000;
  --z-mobile-nav: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
  --z-back-to-top: 900;
  --z-whatsapp-float: 900;
}

/* ---- Breakpoints (reference — used in media queries as literal values) ----
   xs:  0–479px   (default, mobile)
   sm:  480px+
   md:  768px+
   lg:  1024px+
   xl:  1280px+
   ========================================================================== */