/*
 * VGS — Dunlap Family Dentistry token overrides.
 *
 * Locked 2026-07-13 from Figma file TVCiIDmQQ0f2GbEZLSH7UK.
 * Full docs: /design-systems/dunlapfamilydentistry.com/
 *
 * Palette: deep warm moss anchor + burgundy logo accent + warm chocolate ink
 *          on warm ivory surface. Warm charcoal footer. No pure black, no
 *          pure white as background.
 *
 * Type:    Very Vogue (private, self-hosted) for display serif.
 *          Poppins for body. Syncopate for small-caps eyebrows.
 */

/* ========================================================================
   Very Vogue Serif — private-hosted @font-face
   Files bundled in this child theme under assets/fonts/.
   ======================================================================== */
@font-face {
  font-family: "Very Vogue";
  src: url("../fonts/veryvogue-display-webfont.woff2") format("woff2"),
       url("../fonts/veryvogue-display-webfont.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Very Vogue";
  src: url("../fonts/veryvogue-display-italic-webfont.woff2") format("woff2"),
       url("../fonts/veryvogue-display-italic-webfont.woff")  format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Very Vogue Text";
  src: url("../fonts/veryvogue-text-webfont.woff2") format("woff2"),
       url("../fonts/veryvogue-text-webfont.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Very Vogue Text";
  src: url("../fonts/veryvogue-text-italic-webfont.woff2") format("woff2"),
       url("../fonts/veryvogue-text-italic-webfont.woff")  format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ------------- Color: brand (Moss editorial direction) --------- */
  /* Warm sage/moss as primary anchor, warm chocolate ink on bone/ivory,
     honey accent for italic emphasis. Burgundy stays for the logo mark. */
  --dunlap-moss:        #3F4A32;   /* Primary — hero bands, CTA bands. */
  --dunlap-moss-800:    #303921;   /* Deep moss — hover / dark alternate sections */
  --dunlap-moss-900:    #262E1B;   /* Deepest moss — footer if we want moss-tinted */
  --dunlap-charcoal:    #251C15;   /* Warm charcoal — footer alternative */
  --dunlap-honey:       #C08957;   /* Warm rust/gold — italic emphasis, hover states */
  --dunlap-honey-600:   #A26F3F;
  --dunlap-burgundy:    #6B2F2F;   /* Logo color. Do NOT use elsewhere. */

  /* Legacy aliases so no existing selector breaks during the pivot. */
  --dunlap-cocoa:       var(--dunlap-moss);
  --dunlap-cocoa-800:   var(--dunlap-moss-800);
  --dunlap-olive:       var(--dunlap-honey);

  /* ------------- Color: ink + surface ------------------------------ */
  --dunlap-ink:         #2E1D14;
  --dunlap-ink-muted:   #6B5443;
  --dunlap-bone:        #F2EAD3;   /* Warm cream */
  --dunlap-ivory:       #F5F0DE;   /* Default page bg */
  --dunlap-cream:       #E8DCC0;   /* Tinted card / callout bg */
  --dunlap-white:       #FFFFFF;
  --dunlap-hairline:    #D9CFB6;

  /* ------------- Color: semantic (map vgs-base tokens) ------------- */
  --color-bg-page:                var(--dunlap-ivory);
  --color-bg-surface:             var(--dunlap-cream);
  --color-bg-subtle:              #EEE9DA;
  --color-bg-inverse:             var(--dunlap-charcoal);

  --color-brand-primary:          var(--dunlap-cocoa);
  --color-brand-primary-hover:    var(--dunlap-cocoa-800);
  --color-brand-accent:           var(--dunlap-honey);

  --color-text-primary:           var(--dunlap-ink);
  --color-text-secondary:         var(--dunlap-ink-muted);
  --color-text-inverse:           var(--dunlap-ivory);
  --color-text-inverse-secondary: rgba(245, 245, 238, 0.75);

  --color-border-default:         var(--dunlap-hairline);
  --color-border-strong:          #C9BC9E;

  /* ------------- Type: families ------------------------------------ */
  --font-display: "Very Vogue", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-label:   "Syncopate", "Helvetica Neue", Arial, sans-serif;

  /* ------------- Type: sizes ---------------------------------------
     Balanced for split-hero layouts. Hero H1 caps at ~88px so a
     3-line headline sits alongside a 3:2 image without one dominating. */
  --fs-display-hero:    clamp(2.75rem, 4.5vw + 1rem, 5.5rem);     /* → 44px … 88px */
  --fs-display-section: clamp(2.25rem, 2.5vw + 1rem, 3.75rem);    /* → 36px … 60px */
  --fs-display-mid:     clamp(1.75rem, 1.5vw + 1rem, 2.75rem);    /* → 28px … 44px */
  --fs-h3:              clamp(1.375rem, 0.6vw + 1rem, 1.75rem);   /* → 22px … 28px */
  --fs-h4:              1.375rem;
  --fs-lead:            clamp(1.125rem, 0.4vw + 1rem, 1.3125rem); /* → 18px … 21px */
  --fs-body:            1.0625rem;                                /* → 17px */
  --fs-body-sm:         1rem;                                     /* → 16px */
  --fs-small:           0.9375rem;                                /* → 15px */
  --fs-eyebrow:         0.8125rem;                                /* → 13px */

  /* ------------- Type: rhythm --------------------------------------
     Tight editorial line-heights on display, generous on body. */
  --lh-display:  1.0;     /* Editorial tight, still readable at 88px */
  --lh-heading:  1.15;
  --lh-body:     1.6;

  --ls-hero:      0.005em; /* Very subtle — reads editorial, not stretched */
  --ls-display:   0;
  --ls-eyebrow:   0.14em;  /* Syncopate tracking */

  /* ------------- Layout ------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;

  --container-max: 1216px;
  --gutter-x:      var(--space-18);
  --section-y:     var(--space-24);

  /* ------------- Radii -------------------------------------------- */
  --radius-input:   6px;
  --radius-card:    8px;
  --radius-card-lg: 12px;
  --radius-pill:    999px;

  /* ------------- Motion ------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 320ms;
  --dur-3: 640ms;
}

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