/* ==========================================================================
   Design tokens — LASIK Laser Centre Bathinda
   Shared by every other stylesheet. Load this file first.

   Standard breakpoint scale (documented convention, not enforceable via
   custom properties inside @media — CSS can't reference var() in a media
   query without a preprocessor). Every responsive rule in this codebase
   uses one of these four values; don't introduce a fifth without updating
   this comment:
     480px  — stacked → 2-col for small paired fields (e.g. prescription inputs)
     640px  — stacked → 2-col for card grids (problem list, trust cards)
     768px  — tablet: container padding increases, 2-col layouts firm up
     900px  — desktop: hero/sticky-CTA breakpoint, widest card grids go 4-col
   ========================================================================== */

:root {
  /* Color: restrained, clinical-premium, one accent */
  --color-bg: #ffffff;
  --color-bg-soft: #f6f8fa;
  --color-bg-tint: #eef5f7;
  --color-ink: #10222a;
  --color-ink-soft: #45585f;
  --color-ink-faint: #7c8b91;
  --color-border: #e2e8ea;
  --color-primary: #0d6e6e;       /* deep teal — clinical, trustworthy */
  --color-primary-dark: #0a5555;
  --color-primary-tint: #e3f1f0;
  --color-accent: #c98a3a;        /* warm gold accent, used sparingly (offer) */
  --color-accent-tint: #fbf1e2;
  --color-success: #2f8f5b;
  --color-error: #b3261e;
  --color-white: #ffffff;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  /* Shared heading/screen-title scale — used by both .h2 (landing) and
     .assess-question (assessment overlay) so the two don't drift apart. */
  --font-size-h1: clamp(28px, 6vw, 48px);
  --font-size-h2: clamp(24px, 4.5vw, 34px);
  --font-size-h3: clamp(18px, 3vw, 22px);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(16, 34, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(16, 34, 42, 0.10);
  --shadow-lg: 0 16px 48px rgba(16, 34, 42, 0.16);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container-max: 1120px;
  --transition-base: 220ms cubic-bezier(0.2, 0.7, 0.3, 1);

  color-scheme: light;
}