/* ============================================================
   Jaiswal Orthopaedics & Dental Care — Design Tokens
   Single source of truth for colour, type, spacing, motion.
   No page should hardcode values that exist here.
   ============================================================ */

:root {
  /* --- Brand & specialty colour ---------------------------- */
  --ink:        #12263A;   /* primary text + master brand navy */
  --ink-80:     #1B3A54;
  --ortho:      #1D5B84;   /* Orthopaedics accent (clinical blue) */
  --ortho-dark: #164A6B;
  --dental:     #2C7A70;   /* Dental accent (teal) */
  --dental-dark:#215E56;

  /* --- Neutrals -------------------------------------------- */
  --paper:      #F5F7F8;   /* page background (cool clinical off-white) */
  --surface:    #FFFFFF;   /* raised surfaces */
  --line:       #DCE3E7;   /* hairline dividers / borders */
  --slate:      #566470;   /* secondary text */
  --muted:      #64707A;   /* tertiary / meta text (AA on --paper) */

  /* --- Functional ------------------------------------------ */
  --wa:         #1FA855;   /* WhatsApp — functional use only */
  --wa-dark:    #178145;
  --danger:     #B23A3A;   /* validation errors */
  --success:    #216E4E;   /* form success */
  --focus:      #1D5B84;   /* keyboard focus ring */

  /* --- Type ------------------------------------------------ */
  --font-head: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Fluid modular scale (~1.24), 17px base for legibility */
  --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.14rem + 0.30vw, 1.38rem);
  --step-2:  clamp(1.44rem, 1.34rem + 0.50vw, 1.73rem);
  --step-3:  clamp(1.73rem, 1.57rem + 0.80vw, 2.16rem);
  --step-4:  clamp(2.07rem, 1.83rem + 1.20vw, 2.70rem);
  --step-5:  clamp(2.49rem, 2.13rem + 1.80vw, 3.38rem);

  --lh-tight: 1.12;
  --lh-head:  1.18;
  --lh-body:  1.6;

  /* --- Spacing (4px base) ---------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --measure: 68ch;              /* max line length for body prose */
  --container: 1180px;          /* max content width */
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* --- Radius / border / elevation (restrained) ------------ */
  --radius-sm: 3px;
  --radius:    6px;
  --border:    1px solid var(--line);
  --ring:      0 0 0 3px rgba(29, 91, 132, 0.35);

  /* --- Motion ---------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  180ms;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: var(--lh-head);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: var(--lh-tight); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: var(--measure); }

a { color: var(--ortho); text-underline-offset: 0.15em; }
a:hover { color: var(--ortho-dark); }

img, svg { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(var(--sp-7), 8vw, var(--sp-9)); }
.stack > * + * { margin-top: var(--sp-4); }
.hairline { border: 0; border-top: var(--border); }

/* Eyebrow — sentence case, not all-caps (avoids the template tell) */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0.01em;
}
.eyebrow--ortho  { color: var(--ortho); }
.eyebrow--dental { color: var(--dental); }

.lead { font-size: var(--step-1); color: var(--slate); line-height: 1.5; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 600;
  line-height: 1; padding: 0.85em 1.35em; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-80); color: #fff; }

.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

.btn--ortho  { background: var(--ortho);  color: #fff; }
.btn--ortho:hover  { background: var(--ortho-dark); color: #fff; }
.btn--dental { background: var(--dental); color: #fff; }
.btn--dental:hover { background: var(--dental-dark); color: #fff; }

.btn__icon { width: 1.15em; height: 1.15em; }

/* ============================================================
   Specialty accent utility — the recurring structural device
   ============================================================ */
.spec--ortho  { --spec: var(--ortho); }
.spec--dental { --spec: var(--dental); }
.spec-rule { border-top: 3px solid var(--spec, var(--ink)); width: 3rem; }

/* ============================================================
   Canonical theme is the light clinical brand. We opt OUT of the
   browser's dark-mode auto-styling so colours are consistent on
   every device (previous dark overrides inverted --ink, which some
   components use as a dark background — that broke the footer, CTA
   band and primary buttons on dark-mode devices).
   ============================================================ */
:root { color-scheme: light; }