/* ==========================================================================
   Village Dental of Milford — design tokens  (PREVIEW build)
   One file to change colour, type and spacing site-wide.
   Palette = the approved warm-taupe / dark-blue / ivory direction.
   Values marked "derived" are not in the supplied brief; they exist so text stays readable.
   ========================================================================== */

/* ---- Fonts: self-hosted, SIL Open Font License 1.1 (see assets/fonts/LICENSE-*.txt) ----
   Verified against goehringdental.com's rendered page: headings are Cormorant Garamond
   (weight 500), body/UI is Jost. Both are open-licensed, so they are used here.
   To use the brief's fallback body face instead, swap --font-sans to "Source Sans 3". */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-var-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Italic-var-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand palette (from the brief) ---- */
  --vd-blue-700: #123B5D;   /* primary dark blue: buttons, links, feature panels */
  --vd-blue-900: #0B2F4A;   /* deeper blue: footer, headings, overlays */
  --vd-taupe-500: #B4A58C;  /* primary accent: buttons on blue, rules */
  --vd-taupe-300: #D8CCB9;  /* light accent: eyebrows on blue, hovers */
  --vd-ivory-100: #F6F3ED;  /* page background */
  --vd-white: #FFFFFF;      /* selected surfaces */
  --vd-ink: #26343E;        /* body text */
  --vd-ink-muted: #5B6368;  /* secondary text */
  --vd-line: #DED6CA;       /* hairlines, card borders */

  /* ---- Derived (documented in docs/03-open-items.md) ---- */
  --vd-taupe-700: #7A6B53;  /* taupe dark enough for TEXT on ivory/white (>= 4.5:1) */
  --vd-ivory-200: #EFEAE0;  /* tonal ivory for image placeholders / quiet bands */
  --vd-field-border: #9A8D76; /* form control outline (>= 3:1 on white, WCAG 1.4.11) */
  --vd-alert: #9C3A2F;      /* required marker + validation text only */

  /* ---- Semantic roles ---- */
  --color-bg: var(--vd-ivory-100);
  --color-surface: var(--vd-white);
  --color-text: var(--vd-ink);
  --color-text-muted: var(--vd-ink-muted);
  --color-heading: var(--vd-blue-900);
  --color-link: var(--vd-blue-700);
  --color-accent: var(--vd-taupe-500);
  --color-border: var(--vd-line);
  --color-focus: var(--vd-blue-700);

  /* ---- Typography ---- */
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-body: 1.125rem;                                  /* 18px */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.3125rem);
  --fs-ui: 0.96875rem;                                  /* 15.5px: nav + buttons */
  --fs-small: 0.9375rem;                                /* 15px */
  --fs-label: 0.8125rem;                                /* 13px uppercase labels only */
  --fs-h1: clamp(2.5rem, 1.5rem + 4.6vw, 5.25rem);      /* 40px mobile -> 84px desktop */
  --fs-h2: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem);     /* 36px -> 52px */
  --fs-h3: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem);    /* 24px -> 30px */
  --lh-body: 1.7;

  /* ---- Layout & spacing ---- */
  --container: 1240px;
  --container-wide: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 9vw, 128px);
  --header-h: 84px;

  /* ---- Shape, depth, motion ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-soft: 0 22px 44px -30px rgba(11, 47, 74, 0.45);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
}

@media (max-width: 1179px) {
  :root { --header-h: 72px; }
}