/* Calmia design tokens — ONE file for the website and the admin (BOOKING_WEBSITE_R1, from mock v4.4 "MOCK OK" 2026-10-23).
   Colours: the homepage's blue + cream + mint, the admin's cream background, the admin's 20 pastels (the same keys as Admin › Services).
   Fonts: the site's own system fonts (Georgia + Segoe UI / system-ui): nothing is downloaded. */
:root {
  color-scheme: light;

  /* brand */
  --brand: #3368a0;          /* the homepage blue today: buttons, links, active states */
  --brand-dark: #275382;
  --brand-soft: #dfe8fa;     /* = pastel "blue" fill */
  --brand-ink: #173b60;

  /* neutrals */
  --ink: #203a4c;            /* headings and body text (homepage today) */
  --ink-2: #2e3934;          /* admin ink, used on admin pages */
  --muted: #5f7682;
  --bg: #f8f5ef;             /* cream page background, shared with the admin */
  --card: #fffdf8;           /* warm white cards (homepage today) */
  --card-2: #ffffff;
  --line: #e3e7e2;
  --line-strong: #c9d3d0;
  --off: #eceee9;

  /* mint family (homepage today) */
  --mint: #c8dfdb;
  --mint-soft: #e1efed;
  --mint-ink: #1f5f6e;

  /* admin accent (kept for the admin pages; the website uses --brand) */
  --accent: #405f50;
  --accent-soft: #e3eee4;

  /* states */
  --ok: #2f6b3a; --ok-soft: #dff4e3;
  --warn: #7a4f0a; --warn-soft: #fdebcc;
  --err: #9b2c2c; --err-soft: #fde2da;

  /* the 20 pastels (fill / ink / dot) — the same keys as Admin › Services */
  --p-rose: #fbe1e8; --p-rose-ink: #8c2f4a; --p-rose-dot: #e07a9b;
  --p-pink: #fae0f1; --p-pink-ink: #7a2d5e; --p-pink-dot: #dd7ab8;
  --p-orchid: #f7e0f7; --p-orchid-ink: #6e2d6e; --p-orchid-dot: #d07ad0;
  --p-lavender: #e9e3fa; --p-lavender-ink: #4f3b93; --p-lavender-dot: #9b85e0;
  --p-wisteria: #e4e2fa; --p-wisteria-ink: #3f3a8c; --p-wisteria-dot: #8f8ae0;
  --p-indigo: #e0e4fa; --p-indigo-ink: #2f3f8c; --p-indigo-dot: #7a8fe0;
  --p-blue: #dfe8fa; --p-blue-ink: #2a4a8c; --p-blue-dot: #7a9fe0;
  --p-sky: #dcebfc; --p-sky-ink: #1f4f8c; --p-sky-dot: #6fa6e8;
  --p-cyan: #dcf2f8; --p-cyan-ink: #1f5f6e; --p-cyan-dot: #6fc2d6;
  --p-teal: #dbf4ef; --p-teal-ink: #1f6659; --p-teal-dot: #6fcdb8;
  --p-mint: #d6f2ec; --p-mint-ink: #0f6155; --p-mint-dot: #4cbfae;
  --p-green: #dff4e3; --p-green-ink: #2a6b3a; --p-green-dot: #7acb8f;
  --p-sage: #e4efd3; --p-sage-ink: #3e5e1e; --p-sage-dot: #8bb55a;
  --p-lime: #ecf5d6; --p-lime-ink: #4f6616; --p-lime-dot: #b1cc5a;
  --p-butter: #fbf1c4; --p-butter-ink: #6b5400; --p-butter-dot: #e0c23a;
  --p-amber: #fdebcc; --p-amber-ink: #7a4f0a; --p-amber-dot: #e5ad4d;
  --p-peach: #ffe8d1; --p-peach-ink: #8a4a12; --p-peach-dot: #f0a060;
  --p-coral: #fde2da; --p-coral-ink: #8a3a28; --p-coral-dot: #ef8f78;
  --p-terracotta: #f9e0d8; --p-terracotta-ink: #7a3622; --p-terracotta-dot: #e08670;
  --p-stone: #eceee9; --p-stone-ink: #526158; --p-stone-dot: #a6b0a8;

  /* type — the fonts of the site today (v2, Owner 23/10: "lấy font chữ như web cũ") */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --fs-body: 17px;           /* phones first; 16px from 1024px */
  --lh-body: 1.5;
  --fs-h1: clamp(2.2rem, 7vw, 3.6rem);
  --fs-h2: clamp(1.6rem, 4.4vw, 2.2rem);
  --fs-h3: 1.15rem;
  --fs-small: 0.88rem;

  /* shape + spacing — rounded squares, not pills (v2) */
  --radius: 14px; --radius-sm: 10px; --radius-btn: 10px; --radius-pill: 8px;
  --gap: 16px; --gutter: 16px;
  --shadow: 0 6px 24px rgba(32, 58, 76, .08);
  --shadow-up: 0 -6px 24px rgba(32, 58, 76, .10);
  --tap: 44px;               /* minimum touch target */

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms; --t: 260ms; --t-slow: 520ms;

  /* layout */
  --head-h: 60px; --tabs-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 1024px) { :root { --fs-body: 16px; --gutter: 32px; --head-h: 72px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; } }