/* Hoa Dao design tokens. Source of truth for site, admin and analytics.
   Reference DNA: refferences/rybicka.jpg (jade field, rice-paper sections, coral pill CTA, floating plates).
   No raw colours, radii or font sizes outside this file. */
:root {
  /* jade lacquer field */
  --jade-950: #13221e;
  --jade-900: #1a2d28;
  --jade-800: #223a34;
  --jade-700: #2d4d45;
  --jade-600: #3a6157;
  --jade-300: #a3bab1;
  --jade-100: #dde7e2;

  /* rice paper */
  --rice-50: #fcf8f0;
  --rice-100: #f6eddc;
  --rice-200: #ecdfc6;
  --rice-300: #ddcaa8;

  /* ink */
  --ink-900: #1c2623;
  --ink-700: #3c4844;
  --ink-500: #67716c;
  --ink-on-jade: #f6eddc;
  --ink-on-jade-muted: #b9c8c1;

  /* peach blossom (hoa đào) */
  --peach-500: #ec7a62;
  --peach-600: #d6604a;
  --peach-700: #b84b37;
  --peach-100: #fbe2d9;
  --blossom-300: #f2b8b2;

  --ok-600: #2f7a52;
  --warn-600: #8a5a00;
  --danger-600: #b42318;

  /* type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);     /* 24-30 */
  --fs-2xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem);  /* 30-42 */
  --fs-3xl: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);  /* 36-56 */
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;

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

  /* shape: sharp, pill or circle. Nothing in between. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-sheet: 28px;
  --r-pill: 999px;

  /* depth */
  --shadow-plate: 0 18px 30px -18px rgb(19 34 30 / 0.55);
  --shadow-sheet: 0 -12px 40px -12px rgb(19 34 30 / 0.35);
  --shadow-pop: 0 10px 30px -10px rgb(19 34 30 / 0.35);
  --line: 1px solid var(--rice-200);
  --line-strong: 1px solid var(--rice-300);
  --line-on-jade: 1px solid rgb(246 237 220 / 0.16);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 620ms;

  --content: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
}