/* ==========================================================================
   DESIGN TOKENS — Global Source of Truth
   Dr. Shrinath Viswanath — Spine Website
   Consolidated from 12 page stylesheets. Loaded once, consumed via var()
   everywhere else. Do not redeclare any of these in page-level CSS.
   ========================================================================== */

:root {

  /* ── Brand Palette ── */
  --c1: #001052;        /* deepest navy  */
  --c2: #0f4c81;        /* primary navy  */
  --c3: #3076a7;        /* mid blue      */
  --c4: #4e9acc;        /* accent blue   */
  --c5: #7ab6da;        /* soft blue     */
  --c6: #90caee;        /* pale sky      */
  --white:     #ffffff;
  --off-white: #f4f8fc; /* page background          */
  --pale:      #eaf4fb; /* subtle tint for cards    */
  --gold:      #c8a96e; /* accent gold              */
  --text:      #0d2a45; /* primary text             */
  --body:      #2c4a60; /* body copy                */
  --muted:     #5a7d95; /* secondary / captions     */
  --wa:        #25D366; /* WhatsApp brand green     */

  /* ── Typography Families ── */
  --f-title: 'Cinzel', serif;       /* display / section headings */
  --f-sub:   'EB Garamond', serif;  /* sub-headings / italics     */
  --f-body:  'Lato', sans-serif;    /* body copy / UI labels      */

  /* ── Font Weights ── */
  --fw-light:    300;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Fluid Type Scale (mobile floor → desktop ceiling) ── */
  --fs-display: clamp(2.25rem, 5vw + 1rem, 5.5rem); /* 36px–88px */
  --fs-80:      5rem;                                /* 80px */

  --fs-h1:      clamp(1.75rem, 3.5vw + 1rem, 3.5rem); /* 28px–56px */
  --hero-sub-size: 5rem;                              /* 80px, fixed */
  --fs-h2:      clamp(1.5rem,  2.5vw + 1rem, 2.5rem); /* 24px–40px */
  --fs-h3:      clamp(1.25rem, 1.75vw + 1rem, 1.875rem); /* 20px–30px */
  --fs-h4:      clamp(1.0625rem, 1vw + 1rem, 1.375rem); /* 17px–22px */

  /* ── Stable UI Sizes — desktop baseline; overridden per breakpoint below ── */
  --fs-body-large: 1.125rem; /* 18px */
  --fs-body:       1rem;     /* 16px */
  --fs-small:      0.875rem; /* 14px */
  --fs-xs:         0.75rem;  /* 12px */

  /* ── Line Heights ── */
  --lh-headings: 1.2;
  --lh-body:     1.6;
  --lh-ui:       1;

  /* ── Spacing Scale — desktop baseline ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Shape & Elevation ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 2px 8px  rgba(15, 76, 129, 0.06);
  --shadow-md: 0 4px 20px rgba(15, 76, 129, 0.08);
  --shadow-lg: 0 12px 48px rgba(15, 76, 129, 0.15);

  /* ── Layout ── */
  --container:    1280px;
  --nav-total-h:  72px;

  /* ── Page-scoped aliases (consumed by inner-page components) ── */
  --off:          var(--off-white);
  --shadow:       0 4px 24px  rgba(15, 76, 129, 0.08);
  --radius:       8px;

  /* orthopedic page */
  --oc-container: 1200px;
  --oc-shadow-lg: 0 12px 48px rgba(15, 76, 129, 0.14);

  /* book-a-consultation page */
  --bc-container: 1200px;
  --bc-shadow:    0 4px 24px  rgba(15, 76, 129, 0.08);
  --bc-shadow-lg: 0 12px 48px rgba(15, 76, 129, 0.14);

  /* ── Shadcn / Tailwind HSL bridge ── */
  --background: 214 60% 97%;
  --foreground:  210 83% 15%;
  --border:      210 40% 88%;
  --input:       210 40% 88%;
  --ring:        210 63% 28%;
  --card:             0 0% 100%;
  --card-foreground:  210 83% 15%;
  --popover:          0 0% 100%;
  --popover-foreground: 210 83% 15%;
  --primary:          210 73% 28%;
  --primary-foreground: 0 0% 100%;
  --secondary:        210 40% 94%;
  --secondary-foreground: 210 73% 28%;
  --muted-hsl:         210 30% 91%;  /* renamed: collided with --muted brand color above */
  --muted-foreground: 210 25% 45%;
  --accent:           210 40% 94%;
  --accent-foreground: 210 73% 28%;
  --destructive:      0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --chart-1: 210 73% 28%;
  --chart-2: 200 63% 42%;
  --chart-3: 190 53% 52%;
  --chart-4:  40 60% 60%;
  --chart-5: 160 50% 40%;
  --sidebar:          210 73% 28%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-border:   210 60% 35%;
  --sidebar-primary:  210 50% 20%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent:   210 60% 35%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-ring:     200 63% 57%;
}