/* Design tokens — tropical green nail salon
   Change brand colours here and the whole page follows. */
:root {
  --build: "2026-08-28-mobile-1";   /* bump when CSS changes; motion-check.html reads it */
  /* Brand — tropical greens */
  --leaf-950: #04211a;
  --leaf-900: #072e23;
  --leaf-800: #0c4433;
  --leaf-700: #115c44;
  --leaf-600: #17795a;
  --leaf-500: #1f9a72;   /* primary */
  --leaf-400: #43b98d;
  --leaf-300: #7fd4b2;
  --leaf-200: #b6e8d2;
  --leaf-100: #ddf3e8;
  --leaf-50:  #f1f9f5;

  /* Warm neutrals */
  --cream:  #fdfaf3;
  --sand:   #f5ede0;
  --sand-dark: #e8dcc9;
  --ink:    #16241f;
  --ink-soft: #4d5f58;
  --white:  #ffffff;

  /* Accent — soft gold for prices, stars, flourishes */
  --gold:   #c79a4e;
  --gold-soft: #f0e0c4;

  /* Semantic */
  --bg: var(--cream);
  --bg-alt: var(--leaf-50);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --primary: var(--leaf-600);
  --primary-dark: var(--leaf-800);
  --border: rgba(12, 68, 51, .12);

  /* Typography */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script: "Dancing Script", "Segoe Script", cursive;
  --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.6rem, 6.2vw, 5rem);
  --fs-h2:   clamp(2rem, 4vw, 3.25rem);
  --fs-h3:   clamp(1.25rem, 2vw, 1.6rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.075rem);
  --fs-small: .875rem;

  /* Space & shape */
  --space-section: clamp(4.5rem, 9vw, 8.5rem);
  --container: 1240px;
  --radius-sm: 12px;
  --radius: 24px;
  --radius-lg: 40px;
  --radius-pill: 999px;

  --shadow-sm: 0 6px 18px rgba(7, 46, 35, .07);
  --shadow: 0 18px 45px rgba(7, 46, 35, .12);
  --shadow-lg: 0 30px 70px rgba(7, 46, 35, .18);

  --ease: cubic-bezier(.22, .61, .36, 1);           /* ease-out — entrances */
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);    /* hover and carousel moves */
  --ease-out-back: cubic-bezier(.34, 1.3, .64, 1);
  --dur-fast: .25s;
  --dur: .45s;
  --dur-slow: .8s;
  --header-h: 84px;
}