/* ============================================================
   Bolton Lake Dental — Foundations
   Soft pastel-wash editorial system. Switzer + Geist Mono.
   ============================================================ */

/* Switzer (sans, with italics) via Fontshare; Geist Mono via Google Fonts. */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@1,2,300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ---------- COLOR — Ink + Canvas ---------- */
  --primary:           #000000;
  --on-primary:        #ffffff;
  --ink:               #000000;
  --canvas:            #ffffff;
  --inverse-canvas:    #000000;
  --inverse-ink:       #ffffff;
  --on-inverse-soft:   #ffffff; /* render at ~16% opacity */

  /* ---------- COLOR — Hairlines + Soft Surface ---------- */
  --hairline:          #e6e6e6;
  --hairline-soft:     #f1f1f1;
  --surface-soft:      #f7f7f5;

  /* ---------- COLOR — Pastel Story Blocks (softened spa palette) ---------- */
  --block-lime:        #e7edd0;   /* pale sage */
  --block-lilac:       #e3d6f4;   /* pale lavender */
  --block-cream:       #f6ecde;   /* peach-cream */
  --block-mint:        #dee9d6;   /* pale sage-green */
  --block-pink:        #f6dcdc;   /* pale blush — the hero wash */
  --block-coral:       #f3d6c2;   /* pale peach */
  --block-navy:        #2a2840;   /* deep navy (used sparingly) */
  --block-blush:       #f5e2dc;   /* very-pale dusty pink — large wash */
  --block-peach:       #f5dccb;   /* soft peach — large wash */

  /* ---------- COLOR — Single-shot accent + Semantic ---------- */
  --accent-magenta:    #d97a5f;   /* coral / terracotta — soft, warm */
  --accent-coral:      #d97a5f;
  --semantic-success:  #1ea64a;
  --overlay-scrim:     #000000; /* render at ~60% opacity */

  /* ---------- TYPE — Families ---------- */
  --font-sans: "Switzer", "figmaSans Fallback", "SF Pro Display", system-ui, -apple-system, "Helvetica Neue", helvetica, sans-serif;
  --font-mono: "Geist Mono", "figmaMono Fallback", "SF Mono", "Menlo", monospace;

  /* ---------- SPACING (8px base) ---------- */
  --space-hair:  1px;
  --space-xxs:   4px;
  --space-xs:    8px;
  --space-sm:    12px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-xxl:   48px;
  --space-section: 96px;

  /* ---------- RADIUS ---------- */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 0 0 var(--hairline) inset; /* simulated as hairline */
  --shadow-2: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-3: 0 20px 60px rgba(0,0,0,0.18);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "kern" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPE — semantic roles
   Weights chosen from the figmaSans axis: 320, 330, 340, 480, 540, 700
   ============================================================ */
.t-display-xl,
h1.display {
  font-family: var(--font-sans);
  font-size: 86px;
  font-weight: 340;
  line-height: 1.00;
  letter-spacing: -1.72px;
}
.t-display-lg {
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 340;
  line-height: 1.10;
  letter-spacing: -0.96px;
}
.t-headline,
h2 {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 540;
  line-height: 1.35;
  letter-spacing: -0.26px;
}
.t-subhead {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 340;
  line-height: 1.35;
  letter-spacing: -0.26px;
}
.t-card-title,
h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 330;
  line-height: 1.40;
  letter-spacing: -0.14px;
}
.t-body,
p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 320;
  line-height: 1.45;
  letter-spacing: -0.26px;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 330;
  line-height: 1.45;
  letter-spacing: -0.14px;
}
.t-link,
a.link {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 480;
  line-height: 1.40;
  letter-spacing: -0.10px;
  color: var(--ink);
  text-decoration: none;
}
.t-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.t-button {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 480;
  line-height: 1.40;
  letter-spacing: -0.10px;
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.30;
  letter-spacing: 0.54px;
  text-transform: uppercase;
}
.t-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.00;
  letter-spacing: 0.60px;
  text-transform: uppercase;
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 480;
  line-height: 1.40;
  letter-spacing: -0.10px;
  border-radius: var(--radius-pill);
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  padding: 10px 20px;
}
.btn-primary:hover { opacity: .9; }

.btn-secondary {
  background: var(--canvas);
  color: var(--ink);
  padding: 8px 18px 10px;
}
.btn-secondary:hover { background: var(--surface-soft); }

.btn-tertiary {
  background: transparent;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--radius-full);
}
.btn-tertiary:hover { background: var(--surface-soft); }

.btn-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface-soft);
  color: var(--ink);
  padding: 0;
}
.btn-icon-inverse {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.16);
  color: var(--inverse-ink);
  padding: 0;
}

.btn-magenta {
  background: var(--accent-magenta);
  color: var(--on-primary);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
}

/* --- Pricing Tabs --- */
.pricing-tab {
  background: var(--canvas);
  color: var(--ink);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 480;
  font-size: 20px;
  border: none;
  cursor: pointer;
}
.pricing-tab.is-selected {
  background: var(--primary);
  color: var(--on-primary);
}

/* --- Inputs --- */
.input {
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 320;
  line-height: 1.45;
  letter-spacing: -0.26px;
  width: 100%;
}
.input:focus {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
  border-color: var(--ink);
}

/* --- Cards --- */
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.card-soft {
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* --- Color-block section --- */
.block {
  border-radius: var(--radius-lg);
  padding: var(--space-xxl);
  color: var(--ink);
}
.block.block-lime    { background: var(--block-lime); }
.block.block-lilac   { background: var(--block-lilac); }
.block.block-cream   { background: var(--block-cream); }
.block.block-mint    { background: var(--block-mint); }
.block.block-pink    { background: var(--block-pink); }
.block.block-coral   { background: var(--block-coral); }
.block.block-navy    { background: var(--block-navy); color: var(--inverse-ink); }

/* --- Marquee strip --- */
.marquee {
  background: var(--inverse-canvas);
  color: var(--inverse-ink);
  height: 36px;
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 330;
}

/* --- Footer --- */
.footer {
  background: var(--canvas);
  color: var(--ink);
  padding: var(--space-section) var(--space-xl);
}

/* --- Hairline divider --- */
.hairline { border-top: 1px solid var(--hairline); }
.hairline-soft { border-top: 1px solid var(--hairline-soft); }