/* ============================================================
   PEARLCARE — DESIGN SYSTEM
   CSS Custom Properties (Design Tokens)
   
   HOW TO ADAPT FOR ANOTHER CLINIC:
   1. Change --color-primary and --color-primary-dark
   2. Adjust pastel accents if specialty has a different palette
   3. Everything else inherits automatically
   ============================================================ */

:root {

  /* ── BRAND COLORS ──────────────────────────────────────── */
  --color-primary:        #1E3A8A;   /* Professional Navy Blue — main CTA */
  --color-primary-dark:   #172554;   /* Deep Midnight Navy — hover state */
  --color-primary-light:  #EFF6FF;   /* Soft Ice Blue — accent bg */
  --color-primary-accent: #2563EB;   /* Bright Medical Blue */

  /* ── BACKGROUND COLORS ─────────────────────────────────── */
  --color-white:          #ffffff;
  --color-bg:             #F8FAFC;   /* Page background */
  --color-bg-alt:         #F1F5F9;   /* Alternate section background */

  /* ── PASTEL ACCENTS (service cards, section tints) ─────── */
  --color-pastel-mint:    #EBF4FF;   /* Crisp Ice Blue */
  --color-pastel-blue:    #DBEAFE;   /* Soft Sky Blue */
  --color-pastel-peach:   #FFF7ED;   /* Warm Sand */
  --color-pastel-yellow:  #FEF9C3;   /* Soft Amber */
  --color-pastel-lilac:   #F3E8FF;   /* Soft Violet */
  --color-pastel-pink:    #FFE4E6;   /* Soft Rose */

  /* ── TEXT COLORS ───────────────────────────────────────── */
  --color-text-primary:   #1A2332;   /* Headings, primary body text */
  --color-text-secondary: #5A6478;   /* Subheadings, descriptions */
  --color-text-muted:     #8A93A6;   /* Captions, placeholders */
  --color-text-inverse:   #ffffff;   /* Text on dark backgrounds */

  /* ── BORDER & DIVIDER ──────────────────────────────────── */
  --color-border:         #E8ECF0;
  --color-border-light:   #F0F4F7;

  /* ── STAR / RATING ─────────────────────────────────────── */
  --color-star:           #F5A623;

  /* ── STATUS ────────────────────────────────────────────── */
  --color-success:        #16A34A;
  --color-success-bg:     #F0FDF4;
  --color-error:          #DC2626;
  --color-error-bg:       #FEF2F2;

  /* ── TYPOGRAPHY ────────────────────────────────────────── */
  --font-family:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Scale */
  --text-xs:    0.75rem;      /* 12px */
  --text-sm:    0.875rem;     /* 14px */
  --text-base:  1rem;         /* 16px */
  --text-lg:    1.125rem;     /* 18px */
  --text-xl:    1.25rem;      /* 20px */
  --text-2xl:   1.5rem;       /* 24px */
  --text-3xl:   1.875rem;     /* 30px */
  --text-4xl:   2.25rem;      /* 36px */
  --text-5xl:   3rem;         /* 48px */
  --text-6xl:   3.75rem;      /* 60px */

  /* Fluid — clamp to avoid layout shifts */
  --text-hero:    clamp(2.25rem, 5.5vw, 3.75rem);
  --text-section: clamp(1.75rem, 3.5vw, 2.5rem);
  --text-card-h:  clamp(1.125rem, 2vw, 1.375rem);

  /* Weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* Line Heights */
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.6;
  --lh-relaxed:  1.75;

  /* Letter Spacing */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.08em;
  --ls-widest:   0.12em;

  /* ── SPACING SCALE ─────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── BORDER RADIUS (Crisp, modern, professional square aesthetic) ── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  8px;
  --radius-3xl:  8px;
  --radius-full: 4px; /* Default square edges per user request */

  /* ── SHADOWS ───────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(26,35,50,0.04);
  --shadow-sm:  0 1px 4px rgba(26,35,50,0.06), 0 1px 2px rgba(26,35,50,0.04);
  --shadow-md:  0 4px 16px rgba(26,35,50,0.08), 0 2px 4px rgba(26,35,50,0.04);
  --shadow-lg:  0 10px 32px rgba(26,35,50,0.10), 0 4px 8px rgba(26,35,50,0.04);
  --shadow-xl:  0 20px 56px rgba(26,35,50,0.12), 0 8px 16px rgba(26,35,50,0.06);
  --shadow-card: 0 2px 12px rgba(26,35,50,0.07);
  --shadow-card-hover: 0 8px 32px rgba(26,35,50,0.12);

  /* ── TRANSITIONS ───────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);

  --transition-fast:   150ms var(--ease-out);
  --transition-base:   250ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --max-width:         1280px;
  --content-width:     1200px;
  --container-px:      1.5rem;
  --section-py:        5rem;
  --section-py-sm:     3.5rem;

  /* ── NAV ─────────────────────────────────────────────────── */
  --nav-height:        72px;
  --nav-bg:            #ffffff;
  --nav-border:        #E2E8F0;

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-base:      1;
  --z-above:     10;
  --z-overlay:   900;
  --z-nav:       1000;
  --z-drawer:    1001;
  --z-modal:     1100;
  --z-toast:     1200;
}

/* ── MOBILE OVERRIDES ────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --container-px:  1.25rem;
    --section-py:    3rem;
    --section-py-sm: 2.25rem;
    --nav-height:    64px;
    --text-hero:     clamp(1.85rem, 6.8vw, 2.5rem);
    --text-section:  clamp(1.5rem, 5.2vw, 2rem);
    --text-3xl:      1.5rem;
    --text-4xl:      1.875rem;
    --text-5xl:      2.25rem;
  }
}

@media (max-width: 375px) {
  :root {
    --container-px:  1rem;
    --text-hero:     clamp(1.65rem, 6.2vw, 2.1rem);
    --text-section:  clamp(1.35rem, 4.8vw, 1.75rem);
  }
}

/* ── REDUCED MOTION SUPPORT ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}