/* VS Dental Center — Brand Tokens (single source of truth for kit + site)
   Derived from-scratch from their real assets: logo (black VS on cream),
   clinic interiors (white/cream cabinetry + warm-wood accent), and posts.
   Warm-only palette on purpose — the recurring identity, not the one-off navy graphic. */

:root {
  /* --- Color: warm neutral base + gold/bronze signature accent + charcoal ink --- */
  --porcelain: #FBF8F2;   /* base background — logo field, walls */
  --cream:     #F1E9DA;   /* secondary surface / cards */
  --sand:      #E4D8C2;   /* borders, subtle fills — cabinetry */
  --sand-soft: #EFE7D7;   /* hairline dividers */
  --gold:      #C6A15B;   /* signature accent — wood panel + gold frame */
  --gold-soft: #D9BE86;   /* light accent, focus rings */
  --bronze:    #8C6A3C;   /* deep accent / hover */
  --ink:       #1E1C19;   /* primary text + the VS wordmark */
  --ink-80:    #35322D;
  --slate:     #6B6459;   /* muted text */
  --slate-40:  #A79E90;   /* faint labels */
  --success:   #4B7A63;   /* functional only (confirmed/booked) */
  --white:     #FFFFFF;

  /* Semantic */
  --bg:            var(--porcelain);
  --surface:       var(--white);
  --surface-warm:  var(--cream);
  --text:          var(--ink);
  --text-muted:    var(--slate);
  --accent:        var(--gold);
  --accent-strong: var(--bronze);
  --line:          var(--sand);

  /* --- Typography --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:   clamp(2.05rem, 7vw, 5rem);
  --fs-h1:     clamp(2.1rem, 4.5vw, 3.5rem);
  --fs-h2:     clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3:     clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9rem;
  --fs-xs:     0.78rem;

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.6;
  --tracking-label: 0.16em;

  /* --- Spacing / layout --- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2.5rem;  --space-5: 4rem;   --space-6: 6.5rem;
  --maxw: 1200px;
  --radius-sm: 8px;  --radius: 16px;  --radius-lg: 28px;  --radius-pill: 999px;

  /* --- Elevation (warm-tinted, soft) --- */
  --shadow-sm: 0 1px 2px rgba(30,28,25,.05), 0 2px 8px rgba(140,106,60,.06);
  --shadow:    0 8px 30px rgba(30,28,25,.08), 0 2px 8px rgba(140,106,60,.06);
  --shadow-lg: 0 24px 60px rgba(30,28,25,.14);

  /* --- Motion (calm confidence) --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-1: 260ms;  --dur-2: 400ms;  --dur-3: 520ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* --- Base primitives usable by kit + site --- */
.vs-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 600;
}
.vs-serif { font-family: var(--font-display); }
.vs-btn {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  padding: .85em 1.5em; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  display: inline-flex; align-items: center; gap: .5em; text-decoration: none;
}
.vs-btn--primary { background: var(--ink); color: var(--porcelain); }
.vs-btn--primary:hover { background: var(--bronze); transform: translateY(-2px); box-shadow: var(--shadow); }
.vs-btn--ghost { background: transparent; color: var(--ink); border-color: var(--sand); }
.vs-btn--ghost:hover { border-color: var(--gold); background: var(--cream); }