/* Laliu Thai-Massage — design tokens.
   Verbatim copy of the design-system token layer (tokens/*.css), flattened into one
   editable file. Change a value here and it changes everywhere on the site. */

/* ---------------------------------------------------------------- fonts ---- */
/* SUBSTITUTION NOTICE: no font binaries were supplied with the brand material.
   The print collateral uses a Lucida-Handwriting-style calligraphic script for the
   wordmark and a humanist sans (Segoe UI / Lato class) for body copy.
   Nearest Google Fonts matches are loaded below. Replace with licensed files when available. */
@import url("https://fonts.googleapis.com/css2?family=Parisienne&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap");

:root {
  /* --------------------------------------------------------------- color --- */

  /* Base: bordeaux (primary brand field, from the Gutschein + Thai poster) */
  --bordeaux-900: #1a0806; /* near-black brown, spa room shadow */
  --bordeaux-800: #3a1210;
  --bordeaux-700: #4b1912; /* badge / plaque fill */
  --bordeaux-600: #661f1d; /* inset panel on print collateral */
  --bordeaux-500: #7d2323; /* THE brand red — voucher field */
  --bordeaux-400: #8e2b22; /* uniform red */
  --bordeaux-300: #a44a3e;
  --bordeaux-100: #e8cfc9;

  /* Gold (ornament, rules, wordmark, plaque borders) */
  --gold-500: #e0bb6c; /* bright gold type on bordeaux */
  --gold-600: #c79a4b; /* default gold: rules, borders, icons */
  --gold-700: #9a8857; /* woven trim gold, muted */
  --gold-800: #8c6b2f;

  /* Sage / olive (second uniform + towels, secondary treatment) */
  --sage-900: #1c2917;
  --sage-700: #313d25;
  --sage-500: #515636;
  --sage-300: #7d8460;
  --sage-100: #dfe0cf;

  /* Spa green (deep green field for the Thai poster / shopfront family) */
  --spa-900: #0b1a08;
  --spa-800: #132608;
  --spa-700: #17300f;
  --spa-600: #1c3a12;
  --spa-500: #274a1e;

  /* Warm neutrals */
  --cream-50: #fdfaf5;
  --cream-100: #f7efe2;
  --cream-200: #eee2cf;
  --sand-300: #d9c8ad;
  --stone-500: #8a7d6d;
  --ink-800: #33231f;
  --ink-900: #1f1512;

  /* Semantic aliases */
  --surface-page: var(--cream-100);
  --surface-card: var(--cream-50);
  --surface-inverse: var(--bordeaux-500);
  --surface-inverse-deep: var(--bordeaux-700);
  --surface-plaque: var(--bordeaux-600);
  --surface-sage: var(--sage-700);
  --surface-spa: var(--spa-800);
  --surface-spa-field: radial-gradient(120% 170% at 50% 62%, var(--spa-500) 0%, var(--spa-700) 46%, var(--spa-900) 100%);

  --text-body: var(--ink-800);
  --text-muted: var(--stone-500);
  --text-heading: var(--bordeaux-700);
  --text-on-inverse: var(--cream-100);
  --text-gold: var(--gold-500);
  --text-link: var(--bordeaux-500);
  --text-link-hover: var(--gold-800);

  --border-hairline: var(--sand-300);
  --border-gold: var(--gold-600);
  --border-on-inverse: rgba(224, 187, 108, 0.55);

  --accent-primary: var(--bordeaux-500);
  --accent-ornament: var(--gold-600);

  --scrim-warm: linear-gradient(180deg, rgba(26, 8, 6, 0) 0%, rgba(26, 8, 6, 0.72) 100%);
  --scrim-flat: rgba(26, 8, 6, 0.55);

  /* ---------------------------------------------------------- typography --- */
  --font-script: "Parisienne", "Lucida Handwriting", cursive;   /* wordmark only */
  --font-serif: "Cormorant Garamond", "Georgia", serif;          /* headings, prices */
  --font-sans: "Lato", "Segoe UI", "Helvetica Neue", sans-serif; /* body, UI */

  /* Fluid from 360px (mobile) to 1120px (content max). The clamp floors are the
     smallest size each role may ever render at — never edit them downward. */
  --fs-wordmark: clamp(30px, 2.2vw + 22px, 44px);
  --fs-display: clamp(34px, 4.6vw + 12px, 56px);
  --fs-h1: clamp(28px, 2.6vw + 18px, 40px);
  --fs-h2: clamp(24px, 1.4vw + 19px, 30px);
  --fs-h3: clamp(20px, 0.5vw + 18px, 22px);
  --fs-body-lg: clamp(17px, 0.5vw + 15px, 19px);
  --fs-body: clamp(16px, 0.3vw + 15px, 17px);
  --fs-small: 15px;
  --fs-caption: 13px;

  --lh-tight: 1.12;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  --ls-display: 0.01em;
  --ls-eyebrow: 0.22em;
  --ls-body: 0.005em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ------------------------------------------------------------- spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --gutter: clamp(16px, 2vw, 24px);
  --section-y: clamp(48px, 7vw, 96px);
  --content-max: 1120px;
  --text-max: 62ch;

  /* Breakpoints, for reference — mirrored in the media queries of site.css */
  --bp-mobile: 679px;
  --bp-tablet: 1023px;

  /* ------------------------------------------------- radius and borders --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-plaque: 14px 14px 14px 14px / 26px 26px 26px 26px;
  --radius-pill: 999px;

  --border-1: 1px;
  --border-2: 2px;
  --rule-gold: 1px solid var(--gold-600);
  --rule-hair: 1px solid var(--border-hairline);
  --frame-gold: 2px solid var(--gold-600);

  /* ----------------------------------------------------------- elevation --- */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(31, 21, 18, 0.06), 0 8px 24px rgba(31, 21, 18, 0.08);
  --shadow-raised: 0 2px 4px rgba(31, 21, 18, 0.10), 0 18px 44px rgba(31, 21, 18, 0.16);
  --shadow-photo: 0 14px 40px rgba(26, 8, 6, 0.28);
  --shadow-inset-plaque: inset 0 0 0 1px rgba(224, 187, 108, 0.35);
  --glow-candle: 0 0 28px rgba(224, 187, 108, 0.28);

  /* -------------------------------------------------------------- motion --- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-photo: 900ms;
}

/* Wide tracking eats too much of a narrow line — ease it on phones. */
@media (max-width: 679.98px) {
  :root { --ls-eyebrow: 0.16em; }
}