/* ============================================
   DENTIST TEMPLATE — DESIGN TOKENS
   Stark swaps these per dentist. Everything else inherits.
   ============================================ */

:root {
  /* ---- Brand Colors (Stark swaps these two per dentist) ---- */
  --color-primary: #6B3A5E;          /* Main accent — plum/maroon from logo */
  --color-primary-light: #8B5A7E;
  --color-primary-dark: #522845;
  --color-accent: #8B5A7E;           /* Secondary accent — lighter plum */
  --color-accent-light: #A87098;
  --color-primary-rgb: 107, 58, 94;   /* RGB triplet for rgba() usage */
  --color-accent-rgb: 139, 90, 126;   /* RGB triplet for rgba() usage */

  /* ---- Derived from brand colors (auto-adjust off primary/accent) ---- */
  --gradient-hero: #ffffff;
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-glass: linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.6) 100%);
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --gradient-cloud: linear-gradient(180deg, #f8fafc 0%, rgba(107, 58, 94, 0.02) 50%, rgba(158, 158, 158, 0.02) 100%);

  /* ---- Status / Utility Colors ---- */
  --color-success: #22c55e;           /* Green — checkmarks, online status */
  --color-star: #f5a623;              /* Gold — star ratings */
  --color-dark: #0f172a;              /* Dark navy — footer bg, dark sections */
  --color-mid: #7D4A6E;              /* Mid — between primary & primary-light */
  --color-muted-gray: #94a3b8;        /* Muted gray — secondary text in dark sections */
  --color-slate: #64748b;             /* Slate — tertiary text */
  --color-bg-alt: #edf2f7;            /* Light gray — alternate section bg */

  /* ---- Neutrals ---- */
  --color-bg: #ffffff;
  --color-bg-white: #ffffff;
  --color-bg-section: #f8fafc;
  --color-text: #1b0c26;
  --color-text-secondary: rgba(28, 12, 38, 0.7);
  --color-text-muted: rgba(28, 12, 38, 0.6);
  --color-border: rgba(255, 255, 255, 0.15);
  --color-border-subtle: rgba(0, 0, 0, 0.06);

  /* ---- Typography ---- */
  --font-heading: 'DM Sans', 'Inter', sans-serif;
  --font-body: 'Inter', 'DM Sans', sans-serif;

  --text-hero: clamp(3rem, 5vw, 4.5rem);
  --text-h2: clamp(2rem, 3.5vw, 3rem);
  --text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

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

  /* ---- Layout ---- */
  --max-width: 1240px;
  --nav-height: 72px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;

  /* ---- Glassmorphism ---- */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-strong: rgba(255, 255, 255, 0.25);
  --glass-blur: blur(12px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.18);

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 40px rgba(107, 58, 94, 0.15);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;
}