/* ALDER DENTAL STUDIO tokens: the single source of truth. Re-skin here first.
   Family: clinical-calm light. White ground, mist surfaces, deep teal accent,
   rounded 16px cards, Sora display + Source Sans 3 body. */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives */
  --white: #ffffff;
  --mist: #edf4f6;
  --mist-2: #e0ecef;
  --mist-3: #d2e3e7;
  --ink: #14201f;
  --ink-2: #1d2c2b;
  --ink-3: #293b39;
  --teal-deep: #0e7c6b;   /* accent on light grounds, AA at label sizes */
  --teal-bright: #21c6a8; /* accent on dark grounds */
  --teal-tint: #dff2ee;   /* soft teal wash for chips and icon plates */

  /* semantic (light theme is the default) */
  --bg: var(--white);
  --bg-2: var(--mist);
  --fg: var(--ink);
  --muted: #51625f;
  --line: rgba(20, 32, 31, 0.14);
  --line-strong: rgba(20, 32, 31, 0.42);
  --accent: var(--teal-deep);
  --accent-soft: var(--teal-tint);
  --focus: #0b5f52;

  /* type */
  --font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", -apple-system, sans-serif;
  --t-display: clamp(2.1rem, 5.4vw, 3.9rem);
  --t-h1: clamp(1.9rem, 4.6vw, 3.3rem);
  --t-h2: clamp(1.55rem, 3.2vw, 2.35rem);
  --t-h3: clamp(1.15rem, 1.9vw, 1.45rem);
  --t-lead: clamp(1.1rem, 1.6vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-kicker: 0.78rem;
  --lh-heading: 1.14;
  --lh-body: 1.6;
  --track-kicker: 0.12em;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-pad: clamp(4.5rem, 11vh, 8rem);
  --gutter: clamp(1rem, 2.5vw, 1.5rem);
  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 40rem;
  --max-w: 76rem;

  /* shape + depth: the high-radius site */
  --r-1: 8px;
  --r-2: 16px;
  --r-3: 24px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 32, 31, 0.05), 0 10px 30px rgba(20, 32, 31, 0.07);
  --shadow-2: 0 2px 6px rgba(20, 32, 31, 0.06), 0 18px 48px rgba(20, 32, 31, 0.1);

  /* gradients */
  --grad-booking: linear-gradient(135deg, var(--teal-deep), #0a5c50);

  /* motion */
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* layers */
  --z-header: 40;
  --z-menu: 50;
  --z-skip: 60;
}

/* ink theme: any wrapper with data-theme="ink" flips the semantic set */
[data-theme="ink"] {
  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --fg: var(--mist);
  --muted: #9fb3b0;
  --line: rgba(237, 244, 246, 0.16);
  --line-strong: rgba(237, 244, 246, 0.55);
  --accent: var(--teal-bright);
  --accent-soft: rgba(33, 198, 168, 0.14);
  --focus: #7fe6d2;
}

/* mist theme: soft tinted surface sections */
[data-theme="mist"] {
  --bg: var(--mist);
  --bg-2: var(--white);
  --line: rgba(20, 32, 31, 0.12);
}

/* calm mode: the "I get nervous at the dentist" switch.
   Applied as html[data-calm="1"] by an inline head script (before first paint)
   and persisted in localStorage on the visitor's device only.
   Softer, lower-stimulus palette (every pairing stays AA), flatter depth,
   zero motion. main.js swaps microcopy for longer reassurance on top of this. */
html[data-calm="1"] {
  --white: #fbfcfb;
  --mist: #eef3f1;
  --mist-2: #e5edea;
  --mist-3: #dbe6e2;
  --teal-deep: #2f6f60;   /* desaturated calm accent, 5.7:1 on calm white */
  --teal-bright: #86cdbd; /* 4.8:1 on the calm flat booking panel */
  --teal-tint: #e4efeb;
  --muted: #5a6663;
  --line: rgba(28, 42, 40, 0.12);
  --line-strong: rgba(28, 42, 40, 0.34);
  --shadow-1: 0 1px 2px rgba(28, 42, 40, 0.04);
  --shadow-2: 0 2px 8px rgba(28, 42, 40, 0.05);
  --grad-booking: #14544a;
  --dur-1: 0ms;
  --dur-2: 0ms;
  --dur-3: 0ms;
}