/*
  狀態玩家 design tokens: visual system v3 (設計總監, 2026-10-21). Every colour, font, size, space,
  corner and motion value lives here; components (styles.css, admin.css) only read these variables.
  test/v2.spec.js reads this file for the WCAG contrast checks, so a palette change is re-checked
  automatically. Keep colours as 6-digit hex (the checker reads that format).
  Self-hosted fonts are declared in /fonts/fonts.css (generated by `npm run build:fonts`);
  the family tokens below decide which font each role uses.
*/
:root {
  /* ---- The five grounds, top to bottom (v3 §4) ---- */
  --seg-1: #F7F1E8;          /* ① hero + 先聊聊: warm beige */
  --seg-2: #F3DCC4;          /* ② 晚餐: apricot */
  --seg-3: #E8BFA8;          /* ③ 最後一站: dusk (ink text only) */
  --seg-4: #3F3A52;          /* ④ night: 導師, 適合誰 */
  --seg-5: #2A2638;          /* ⑤ deep night: 預約, FAQ, footer */
  --band-dusk-mid: #D99A86;  /* static bands between grounds (no text on them) */
  --band-dusk-low: #8C7A9B;

  /* ---- Text and accents ---- */
  --ink: #2F2723;
  --ink-soft: #4A3F38;
  --muted: #655850;
  --clay: #A0532F;
  --clay-dk: #84421F;
  --plum: #5E4E6E;
  --plum-light: #8C7A9B;     /* decoration only (3.48 on beige) */
  --night-ink: #F7F1E8;
  --night-muted: #C9C3DA;
  --lamp: #E9B48A;

  /* ---- Surfaces and controls ---- */
  --paper: #FFFBF5;          /* invitation card, form */
  --paper-2: #F2E9DD;
  --white: #FFFFFF;
  --selected: #F6E6D8;
  --field: #8A796C;          /* control borders, 3:1 on every light ground */
  --line: #E6D9CA;
  --line-dark: rgba(247, 241, 232, .16);
  --focus: #4A5A8C;
  --focus-ring: #2B211B;     /* focus outline on choices (separate from the selected fill) */
  --brand-on-photo: #FFF8EE; /* 狀態玩家 over the phone hero photo; also the phone booking bar */
  --bar-line: #E3D3C4;
  --hero-shade: rgba(31, 24, 20, .45);  /* phone hero: top shade under the brand */
  --hero-shade-end: rgba(31, 24, 20, 0);
  --error: #A1392B;
  --error-bg: #FBEEE8;
  --error-line: #E8C4B8;
  --success: #466140;
  --success-bg: #EEF2E7;
  --disabled-bg: #EFE6DA;
  --disabled-ink: #8E8178;
  --button-ink: #FFFFFF;
  --placeholder-1: #EADCCB;  /* photo placeholders until the licensed photos arrive */
  --placeholder-2: #E3C9B2;
  --placeholder-3: #D9AE97;
  --placeholder-4: #4A4460;

  /* ---- Names kept for the admin pages (they read these) ---- */
  --bg: var(--seg-1);
  --accent: var(--clay);
  --accent-dark: var(--clay-dk);
  --accent-soft: #F8E9DE;
  --sage: #6F8463;
  --night: var(--seg-4);
  --footer: #35304A;
  --serif: var(--font-heading);

  /* ---- Fonts (v3 §2): headings Noto Serif TC 500, numbers Cormorant 500, one quote in Wanfeng Quote ---- */
  --font-heading: "Wanfeng Serif", "Wanfeng Serif Fallback", "Songti TC", "PMingLiU", serif;
  --font-num: "Wanfeng Num", "Wanfeng Num Fallback", Georgia, serif;
  --font-quote: "Wanfeng Quote", "Kaiti TC", "BiauKai", "DFKai-SB", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;

  /* ---- Type scale (mobile → desktop ≥960 with clamp) ----
     rem, so a larger browser font size (or a 200% root) scales the text (B6, blind test P2-4); the vw middles are
     unchanged, so at the default 16px every size is the same px as before. */
  --fs-display: clamp(1.75rem, 8.72vw, 3.25rem); /* 34px at 390 (v3), 2.0× the 17px body (P2-2) */
  --fs-h2: clamp(1.5rem, 4.2vw, 2rem);
  --fs-h3: clamp(1.1875rem, 2.4vw, 1.3125rem);
  --fs-lead: clamp(1.125rem, 2.2vw, 1.25rem);
  --fs-body: clamp(1.0625rem, 1.9vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-tag: .8125rem;
  --fs-time: clamp(.9375rem, 1.7vw, 1rem);
  --fs-sunset: clamp(2.5rem, 6vw, 3.5rem);
  --fs-quote: clamp(1.25rem, 2.6vw, 1.5rem);
  --lh-display: 1.35;
  --lh-h2: 1.45;
  --lh-body: 1.85;
  --lh-small: 1.7;
  --ls-display: .08em;
  --ls-h3: .06em;
  --ls-body: .02em;
  --ls-time: .12em;
  --ls-button: .12em;

  /* ---- Space (4/8/12/16/24/32/48/72/120) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-moment: 64px; /* photo ↔ text on desktop moments */
  --space-8: 72px;
  --space-9: 120px;
  --gutter: 24px;
  --max: 1200px;
  /* One text column for the dark sections, the booking card and the footer, in px so a smaller font
     (the footer is 15px) does not make its em-based column narrower (design review of #6, P1-9). */
  --content: 612px;

  /* ---- Corners (v3 §7): controls 4px, photos and cards 0 ---- */
  --r-1: 4px;
  --r-0: 0;

  /* ---- Motion (v3 §6): three kinds only ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-reveal: 700ms;
  --dur-pick: 200ms;
  --dur-moon: 1.2s;
  --stagger: 80ms;
  --rise: 12px;
  --moon-rise: 24px;

  /* ---- Grain (v3 §7) ---- */
  --grain-light: .035;
  --grain-dark: .05;

  color-scheme: light;
}