/* Design tokens
   Everything that makes this site look like Vals Nails lives here.
   To re-brand for another client, change these values (and the fonts link in index.html). */

:root {
  color-scheme: light;

  /* Colour: refined neutrals with a rosewood accent taken from the logo and posts */
  --c-porcelain: #FBF5F2;          /* page background */
  --c-blush: #FCEBE5;              /* soft feminine accent surface */
  --c-petal: #F4D9D1;              /* deeper accent surface */
  --c-linen: #F3E9E3;              /* alternate section surface */
  --c-paper: #FFF9F6;              /* cards */
  --c-ink: #1F1A1A;                /* text and dark sections */
  --c-cocoa: #2A2120;              /* warm dark surface */
  --c-rose: #87504B;               /* accent text, links, buttons (AA on light surfaces) */
  --c-rose-soft: #C4958A;          /* decorative linework only, never body text */
  --c-gold: #CFA595;               /* hairlines and foil on dark surfaces */
  --c-muted: #665653;              /* supporting text */
  --c-line: rgba(31, 26, 26, 0.12);
  --c-line-strong: rgba(31, 26, 26, 0.26);
  --c-on-dark: #FCEBE5;
  --c-on-dark-muted: rgba(252, 235, 229, 0.76);
  --c-line-dark: rgba(252, 235, 229, 0.18);
  --c-error: #A3312A;
  --c-open: #2F6B4F;

  /* Type: a Bodoni display face that echoes the VN monogram, with Jost for reading */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Didot LT STD", Georgia, serif;
  --font-body: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-h4: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --fs-h3: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
  --fs-h2: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  --fs-display: clamp(3.4rem, 1.9rem + 6.6vw, 8.25rem);
  --lh-tight: 1;
  --lh-snug: 1.12;
  --lh-body: 1.65;
  --tracking-label: 0.2em;

  /* Space and layout */
  --wrap: 1240px;
  --wrap-narrow: 780px;
  --gutter: clamp(20px, 5vw, 60px);
  --header-h: 72px;
  --space-section: clamp(5.5rem, 3.5rem + 7.5vw, 10.5rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Shape: the arch is the house motif, taken from the shape of a nail tip */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --arch: 999px 999px var(--radius-sm) var(--radius-sm);

  /* Depth */
  --shadow-soft: 0 40px 70px -48px rgba(80, 40, 36, 0.5);
  --shadow-card: 0 1px 0 rgba(31, 26, 26, 0.05), 0 26px 50px -38px rgba(80, 40, 36, 0.45);

  /* Motion: one set of curves and timings used everywhere */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
  --dur-slower: 1.25s;
  --reveal-distance: 30px;

  /* Names the booking window already uses. Keep these mapped to the tokens above. */
  --blush: var(--c-blush);
  --petal: var(--c-petal);
  --paper: var(--c-paper);
  --ink: var(--c-ink);
  --rose: var(--c-rose);
  --muted: var(--c-muted);
  --line: var(--c-line);
  --error: var(--c-error);
  --open: var(--c-open);
  --serif: var(--font-display);
  --sans: var(--font-body);
  --shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  :root { --header-h: 84px; }
}