/* ============================================================================
   VIO Med Spa — reverse-engineered design system (core)
   Extracted 1:1 from viomedspa.com (WordPress "frost-child" + custom blocks).
   Fonts: Cormorant Garamond (serif display) + Nunito Sans (sans body).
   Both are SIL Open Font License — free to reuse.
   ----------------------------------------------------------------------------
   Load order:  vio-system.css  →  vio-blocks.css
   ========================================================================== */

/* ── FONTS (variable) ─────────────────────────────────────────────────────── */
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.woff2') format('woff2');}
@font-face{font-family:"Nunito Sans";font-style:italic;font-weight:100 900;font-display:swap;
  src:url('../fonts/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.woff2') format('woff2');}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 900;font-display:swap;
  src:url('../fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2');}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 900;font-display:swap;
  src:url('../fonts/CormorantGaramond-Italic-VariableFont_wght.woff2') format('woff2');}

/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
:root{
  /* Brand neutrals (the whole palette is warm monochrome) */
  --wp--preset--color--vio-lotion:      #FEFFF9;  /* near-white, warm       */
  --wp--preset--color--vio-alabaster:   #F2F0E6;  /* soft warm off-white    */
  --wp--preset--color--vio-mtn-greige:  #E9E3DC;  /* greige section bg      */
  --wp--preset--color--vio-mouse:       #B29D92;  /* muted taupe            */
  --wp--preset--color--vio-mouse-dark:  #5C4A3A;  /* deep taupe             */
  --wp--preset--color--vio-ink:         #292929;  /* primary text / dark bg */
  --wp--preset--color--vio-onyx:        #1A1614;  /* deepest dark           */
  --wp--preset--color--vio-blue-dark:   #3a4a52;  /* slate accent           */
  --wp--preset--color--vio-blue-light:  #7c95a2;  /* muted blue accent      */
  --wp--preset--color--vio-bright-blue: #345dbc;  /* link blue              */
  --wp--preset--color--white:           #ffffff;
  --wp--preset--color--black:           #000000;
  --wp--preset--color--ink-900:#141414; --wp--preset--color--ink-700:#474747;
  --wp--preset--color--ink-500:#808080; --wp--preset--color--ink-400:#9E9E9E;
  --wp--preset--color--ink-200:#D1D1D1;

  /* Type families */
  --wp--preset--font-family--nunito-sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wp--preset--font-family--cormorant-garamond:"Cormorant Garamond",serif;

  /* Type scale */
  --wp--preset--font-size--tiny:0.813rem; --wp--preset--font-size--xs:0.875rem;
  --wp--preset--font-size--sm:1rem;       --wp--preset--font-size--base:1.375rem;
  --wp--preset--font-size--lg:1.5rem;     --wp--preset--font-size--xl:1.625rem;
  --wp--preset--font-size--lead:1.5rem;
  --wp--preset--font-size--heading-xl:clamp(2.625rem, 2rem + 2vw, 3.5rem);
  --wp--preset--font-size--heading-1:2.625rem; --wp--preset--font-size--heading-2:2rem;
  --wp--preset--font-size--heading-3:1.625rem; --wp--preset--font-size--heading-4:1.5rem;
  --wp--preset--font-size--heading-5:1.25rem;  --wp--preset--font-size--heading-6:1.125rem;

  /* Weights */
  --wp--custom--vio--weight--light:350;  --wp--custom--vio--weight--regular:400;
  --wp--custom--vio--weight--medium:500; --wp--custom--vio--weight--bold:700;
  --wp--custom--vio--weight--black:900;

  /* Line heights */
  --wp--custom--line-height--heading:125%; --wp--custom--line-height--body:1.75;
  --wp--custom--line-height--copy:155%;

  /* Spacing */
  --wp--preset--spacing--20:0.44rem; --wp--preset--spacing--30:0.67rem;
  --wp--preset--spacing--40:1rem;    --wp--preset--spacing--50:1.5rem;
  --wp--preset--spacing--60:2.25rem; --wp--preset--spacing--70:3.38rem;
  --wp--preset--spacing--80:5.06rem;
  --wp--preset--spacing--250:10px;   --wp--preset--spacing--500:20px;
  --wp--preset--spacing--1000:40px;  --wp--preset--spacing--1250:50px;
  --wp--preset--spacing--2450:100px;
  --wp--preset--spacing--section-pad:clamp(40px, 3vw, 50px);
  --wp--custom--spacing--section:4rem; --wp--custom--spacing--block:2rem;

  /* Radius — note: buttons are square (0). Cards use small radii. */
  --wp--custom--radius--full:999px; --wp--custom--radius--lg:1rem;
  --wp--custom--radius--md:0.5rem;  --wp--custom--radius--sm:0.25rem;

  /* Shadows */
  --wp--preset--shadow--natural:6px 6px 9px rgba(0,0,0,.2);
  --wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,.4);
  --wp--preset--shadow--crisp:6px 6px 0px rgb(0,0,0);
  --wp--preset--shadow--md:0 6px 16px rgba(0,0,0,.10);

  /* Overlays */
  --wp--custom--overlay--dark:rgba(0,0,0,.32);
  --wp--custom--overlay--light:rgba(233,227,219,.35);

  /* Buttons */
  --vio-btn-height:34px; --vio-btn-lg-height:54px;
  --vio-btn-pad-x:var(--wp--preset--spacing--500,20px);
  --vio-btn-radius:0; --vio-btn-border:2px;
  --vio-btn-font-size:var(--wp--preset--font-size--xs,.813rem);
  --vio-btn-lg-font-size:1.625rem;
  --vio-btn-font-weight:400; --vio-btn-gap:.5rem;
}

/* ── BASE ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--wp--preset--font-family--nunito-sans);
  font-size:var(--wp--preset--font-size--base);
  line-height:var(--wp--custom--line-height--copy);
  color:var(--wp--preset--color--vio-ink);
  background:var(--wp--preset--color--vio-lotion);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Body copy links */
.vio-richtext a:not(.vio-btn){color:var(--wp--preset--color--vio-bright-blue);text-decoration:underline}

/* ── SECTION SCAFFOLDING ──────────────────────────────────────────────────── */
.vio-section{
  --vio-lotion:var(--wp--preset--color--vio-lotion);
  --vio-ink:var(--wp--preset--color--vio-ink);
  --vio-mouse:var(--wp--preset--color--vio-mouse);
  --vio-mtn-greige:var(--wp--preset--color--vio-mtn-greige);
  --vio-fg:var(--wp--preset--color--vio-ink);
  --vio-fg-inverse:var(--wp--preset--color--vio-lotion);
  --vio-tertiary-line:var(--wp--preset--color--vio-ink);
  /* button theme defaults (light section) */
  --vio-btn-primary-bg:var(--wp--preset--color--vio-ink);
  --vio-btn-primary-fg:var(--wp--preset--color--vio-lotion);
  --vio-btn-secondary-bg:transparent;
  --vio-btn-secondary-fg:var(--wp--preset--color--vio-ink);
  --vio-btn-secondary-border:var(--wp--preset--color--vio-ink);
  --vio-btn-secondary-bg-hover-fg:var(--wp--preset--color--vio-lotion);
  padding:40px;position:relative;width:100%;color:var(--vio-fg);
}
.vio-section__inner{width:100%;max-width:1360px;margin-inline:auto}
.vio-section__intro{display:flex;flex-direction:column;gap:var(--wp--preset--spacing--500,20px);z-index:2}
.vio-section__head{display:flex;flex-direction:column;gap:var(--wp--preset--spacing--500,20px)}
.vio-section__eyebrow{
  margin:0;font-size:var(--wp--preset--font-size--xs,14px);line-height:1.2;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:inherit;opacity:.85;
}
.vio-section__title{margin:0}
.vio-section__title,.vio-section__title-main,.vio-section__title-alt{font-weight:400}
/* The signature editorial serif display line */
.vio-section__title-main{
  font-family:var(--wp--preset--font-family--cormorant-garamond,serif);
  font-weight:400;line-height:1.25;letter-spacing:.03em;
  font-size:clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  display:block;
}
/* The sans-serif companion line (used as sub-headline) */
.vio-section__title-alt{
  font-family:var(--wp--preset--font-family--nunito-sans);
  font-weight:400;line-height:1.25;
  font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.625rem);
  display:block;
}
.vio-section__lead{margin:0;font-size:var(--wp--preset--font-size--lg);line-height:1.55}
.vio-section__lead p{margin:0}
.vio-section__cta{display:flex;gap:var(--wp--preset--spacing--500,20px);flex-direction:column;justify-content:flex-start;align-items:flex-start}

/* Hero-slider display sizes (larger) */
.vio-hero-slider .vio-section__title-main{font-size:clamp(2.625rem, 2rem + 2.6vw, 3.5rem);line-height:1.25;letter-spacing:.023em}
.vio-hero-slider .vio-section__title-alt{font-size:clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem)}

/* ── BACKGROUND UTILITIES ─────────────────────────────────────────────────── */
.vio-bg--vio-lotion{background-color:var(--wp--preset--color--vio-lotion);--vio-section-bg:var(--wp--preset--color--vio-lotion)}
.vio-bg--vio-alabaster,
.vio-bg--vio-mtn-greige{background-color:var(--wp--preset--color--vio-mtn-greige);--vio-section-bg:var(--wp--preset--color--vio-mtn-greige)}
.vio-bg--vio-mouse{background-color:var(--wp--preset--color--vio-mouse);--vio-section-bg:var(--wp--preset--color--vio-mouse)}
.vio-bg--vio-blue-light{background-color:var(--wp--preset--color--vio-blue-light);--vio-section-bg:var(--wp--preset--color--vio-blue-light)}
.vio-bg--vio-blue-dark{background-color:var(--wp--preset--color--vio-blue-dark);--vio-section-bg:var(--wp--preset--color--vio-blue-dark)}
.vio-bg--vio-ink{background-color:var(--wp--preset--color--vio-ink);--vio-section-bg:var(--wp--preset--color--vio-ink)}
.vio-bg--vio-onyx{background-color:var(--wp--preset--color--vio-onyx);--vio-section-bg:var(--wp--preset--color--vio-onyx)}
/* Dark sections invert text + button theme */
.vio-bg--vio-ink,.vio-bg--vio-onyx,.vio-bg--vio-blue-dark,.vio-bg--vio-mouse{color:var(--wp--preset--color--vio-lotion)}
.vio-bg--vio-ink .vio-section__eyebrow,.vio-bg--vio-onyx .vio-section__eyebrow{color:var(--wp--preset--color--vio-lotion)}
.vio-bg--vio-ink,.vio-bg--vio-onyx{
  --vio-tertiary-line:var(--wp--preset--color--vio-lotion);
  --vio-btn-primary-bg:var(--wp--preset--color--vio-lotion);
  --vio-btn-primary-fg:var(--wp--preset--color--vio-ink);
  --vio-btn-secondary-fg:var(--wp--preset--color--vio-lotion);
  --vio-btn-secondary-border:var(--wp--preset--color--vio-lotion);
}

/* ── BUTTON SYSTEM ────────────────────────────────────────────────────────── */
a.vio-btn,span.vio-btn{text-decoration:none;white-space:nowrap}
.vio-btn{
  --vio-btn-bg:transparent;--vio-btn-fg:currentColor;--vio-btn-bd:transparent;
  --vio-btn-bg-hover:var(--vio-btn-bg);--vio-btn-fg-hover:var(--vio-btn-fg);--vio-btn-bd-hover:var(--vio-btn-bd);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--vio-btn-gap);
  padding-left:var(--vio-btn-pad-x);padding-right:var(--vio-btn-pad-x);
  height:var(--vio-btn-height);min-height:var(--vio-btn-height);
  font-family:var(--wp--preset--font-family--nunito-sans);
  font-size:var(--vio-btn-font-size);font-weight:500;letter-spacing:1.58px;text-transform:uppercase;
  line-height:1;cursor:pointer;
  background:var(--vio-btn-bg);color:var(--vio-btn-fg);
  border:var(--vio-btn-border) solid var(--vio-btn-bd);border-radius:var(--vio-btn-radius);
  transition:background-color .2s,color .2s,border-color .2s,opacity .2s;
}
.vio-btn:hover,.vio-btn:focus-visible{background:var(--vio-btn-bg-hover);color:var(--vio-btn-fg-hover);border-color:var(--vio-btn-bd-hover)}
.vio-btn:focus{outline:none}
.vio-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.vio-btn--lg{height:var(--vio-btn-lg-height);min-height:var(--vio-btn-lg-height);font-size:var(--vio-btn-lg-font-size);letter-spacing:1px}

/* Primary — filled ink, inverts on hover */
.vio-btn--primary{
  --vio-btn-bg:var(--vio-btn-primary-bg);--vio-btn-fg:var(--vio-btn-primary-fg);--vio-btn-bd:var(--vio-btn-primary-bg);
  --vio-btn-bg-hover:transparent;--vio-btn-fg-hover:var(--vio-btn-primary-bg);--vio-btn-bd-hover:var(--vio-btn-primary-bg);
}
/* Secondary — outline */
.vio-btn--secondary{
  --vio-btn-bg:var(--vio-btn-secondary-bg);--vio-btn-fg:var(--vio-btn-secondary-fg);--vio-btn-bd:var(--vio-btn-secondary-border);
  --vio-btn-bg-hover:var(--vio-btn-secondary-fg);--vio-btn-fg-hover:var(--vio-btn-secondary-bg-hover-fg,var(--wp--preset--color--vio-lotion));--vio-btn-bd-hover:var(--vio-btn-secondary-fg);
}
/* Light — filled lotion */
.vio-btn--light{
  --vio-btn-bg:var(--wp--preset--color--vio-lotion);--vio-btn-fg:var(--wp--preset--color--vio-ink);--vio-btn-bd:var(--wp--preset--color--vio-lotion);
  --vio-btn-bg-hover:transparent;--vio-btn-fg-hover:var(--wp--preset--color--vio-lotion);--vio-btn-bd-hover:var(--wp--preset--color--vio-lotion);
}
/* Tertiary — uppercase text with animated 2px underline */
.vio-btn--tertiary{
  --vio-btn-fg:var(--vio-tertiary-line);--vio-btn-fg-hover:var(--vio-tertiary-line);
  padding:0;height:auto;min-height:0;border:0;line-height:unset;background:transparent;
  font-weight:500;letter-spacing:1.58px;
}
.vio-btn--tertiary::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--vio-tertiary-line);transition:background-color .16s}
.vio-btn--tertiary:hover{font-weight:700}