/* Smith Haven Dentistry — design tokens
   One colour: their existing blue #7cb0d3, deepened to carry text on a light ground.
   Everything else is a near-achromatic neutral. */
:root {
  /* --- color ---
     The tan/gold was the Officite template's default, not brand equity — no logo,
     signage or collateral uses it. Keeping it was what made this read as the old site.
     Neutrals are near-achromatic with a faint cool cast; their blue is the only colour. */
  --bg:            oklch(0.988 0.002 255);
  --surface:       oklch(0.964 0.004 255);
  --surface-deep:  oklch(0.185 0.014 258);
  --ink:           oklch(0.205 0.013 258);
  --ink-muted:     oklch(0.452 0.011 258);
  --ink-invert:    oklch(0.975 0.003 255);
  --border:        oklch(0.886 0.005 258);
  --border-strong: oklch(0.775 0.009 258);
  --brand:         oklch(0.205 0.013 258);   /* structural rules, not a second colour */

  --accent:        oklch(0.520 0.152 242);
  --accent-hover:  oklch(0.430 0.140 242);
  --accent-bright: oklch(0.660 0.170 240);
  --accent-wash:   oklch(0.520 0.152 242 / 0.08);
  --focus:         oklch(0.560 0.170 242);
  --open:          oklch(0.455 0.098 152);

  /* --- type: Newsreader (display) + Karla (text). Not Inter, not Lato. --- */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-text: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 5 steps only, 1.25 ratio */
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.44vw, 1.46rem);
  --step-2:  clamp(1.55rem, 1.34rem + 1.02vw, 2.20rem);
  --step-4:  clamp(2.35rem, 1.72rem + 3.05vw, 4.05rem);

  /* --- space: 4px base --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(64px, 9vw, 152px);

  /* --- surface: borders only. No card shadows anywhere on this site. --- */
  --radius: 2px;
  --hair: 1px solid var(--border);

  /* five duration tokens cover ~95% of the UI; do not invent more */
  --motion-fast:   120ms;  /* opacity, colour, hover, focus ring */
  --motion-base:   200ms;  /* small UI — toggles, accordion, list rows */
  --motion-medium: 280ms;  /* medium UI — the mobile shelf */
  --motion-slow:   400ms;  /* rare, deliberate — the confirmation tick */

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover: cubic-bezier(0.2, 0, 0, 1);
}