/* Hallmark · shape: app screen · genre: playful · theme: custom · idea: "every focused minute grows a Vietnamese plant with a face, in a garden that keeps the days" · vibe: "flat soft garden, sunny, kawaii, calm" · hero: none, app scope; the focus ring with the plant in its pot is the signature
 * paper: oklch(97% 0.018 155) day mint, oklch(21% 0.035 170) night forest · accent: oklch(80% 0.13 62) apricot sun with dark ink · display: Baloo 2 800 · body: Nunito 500/800 (both 146/146 Vietnamese letters, measured in v2)
 * nav: top bar over a five-tab bar (Trồng cây, Thở, Chơi, Rừng, Nhật ký), icons always with text · footer: none, app scope · signature: the timer ring with a kawaii plant in its pot, growing seed to tree · states: default, hover, focus-visible, pressed, disabled, loading, selected, error
 * axes: light/rounded-sans/chromatic-orange · posture: full-palette (field green, apricot signal, blossom pink, sky, warm earth) · modes: light+dark+auto · contrast: pass, measured in DESIGN.md · motion: calm, spring only on stage-up and celebrations · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, a cute world invites one decoration too many; faces and sway live only on plants, chrome stays flat and quiet */
/* Hallmark · waive 80 · nine Vietnamese plant species with faces, the pot and the forest island drawn as SVG from art tokens · the founder asked for kawaii Bàng, Tre, Sen, Đào, Mai and the rest at four growth stages; no photograph shows a plant with a face */
/* Hallmark · waive 39b · the Trồng and Bắt đầu pills stand 56px from --tap-l, every other control 44 to 48px · older users (P4) start a focus session one-handed, so the one action of the screen is the biggest target */
/* Hallmark · dismissed 49 · settings rows pair a title with a one-line explanation and wrap on purpose inside a 56px row */
/* Hallmark · dismissed 23 · the accent fills only the leave-app reminder strip during the 10-second grace and the primary pill, never a page band */
/* Hallmark · answered F4 · plain .btn is the neutral card fill for puzzle tools and pads; the apricot .btn--primary is the single filled primary per screen */
/* Hallmark · answered F7 · the pill radius stays on controls and their status cousins: segmented groups, the puzzle timer chip and the sheet grabber */
/* Tokens bản 3: nguồn sự thật cho mọi màu, chữ, khoảng cách, bo góc và chuyển động. base.css và các màn chỉ dùng var().
   Màu green cho nền là ý người dùng ("flat, soft, calm nature palette: greens, warm earth, sky"), không phải màu chọn theo ngành. */
:root {
  color-scheme: light;

  /* Khoảng cách (thang scaffold) */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;

  /* Chữ: thang app tỉ lệ 1,2 từ thân bài 17px, đơn vị rem để chữ 200% đẩy được mọi chữ */
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.275rem; --text-xl: 1.53rem; --text-2xl: 1.836rem; --text-3xl: 2.2rem; --text-4xl: 2.64rem;
  --text-display-s: var(--text-xl); --text-display: var(--text-2xl); --text-section: var(--text-lg); --text-title: var(--text-lg); --text-lead: var(--text-lg);
  --text-figure: 3.2rem; --text-tab: 0.8125rem;
  --leading-head: 1.28; --leading-body: 1.55; --leading-ui: 1.3;
  --weight-body: 500; --weight-strong: 800; --weight-display: 800;
  --tracking-display: 0;
  --font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, system-ui, sans-serif;
  --font-outlier: var(--font-body);

  /* Chuyển động: chỉ transform và opacity */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-breath: cubic-bezier(0.45, 0, 0.55, 1); --ease-linear: linear;
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --dur-pop: 560ms; --dur-celebrate: 1400ms; --dur-count: 900ms; --dur-fall: 3600ms;
  --dur-sway: 4200ms; --dur-blink: 5200ms; --dur-firefly: 9000ms; --dur-cloud: 60000ms;
  --sway-deg: 2.5deg; --droop-max: 16deg;

  /* Bố cục, vùng chạm, lớp */
  --container: 1200px; --gutter: 20px; --gap-columns: 16px; --section-gap-s: 40px; --section-gap: 64px; --section-gap-l: 96px;
  --tap: 48px; --tap-l: 56px; --tap-xl: 64px; --bar-h: 64px;
  --ring-size: 272px; --ring-track: 14px; --ring-knob: 44px;
  --pz-cell: 46px; --pz-gap: 3px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Bo góc, đường kẻ, vòng focus, bóng */
  --radius-card: 22px; --radius-sheet: 28px; --radius-input: 16px; --radius-chip: 14px; --radius-cell: 10px; --radius-pill: 999px;
  --rule-hair: 1px; --rule-bar: 2px; --lip: 4px;
  --focus-width: 3px; --focus-offset: 2px;
  --shadow-card: 0 2px 10px oklch(27% 0.05 165 / 0.08);

  /* Màu, ngày nắng */
  --color-paper: oklch(97% 0.018 155); --color-paper-2: oklch(93.5% 0.03 155); --color-paper-3: oklch(90% 0.04 155);
  --color-card: oklch(99.3% 0.006 155);
  --color-ink: oklch(27% 0.05 165); --color-ink-2: oklch(37% 0.05 165); --color-muted: oklch(46% 0.045 165); --color-rule: oklch(86% 0.035 155); --color-edge: oklch(58% 0.04 165);
  --color-field: oklch(85% 0.085 150); --color-field-2: oklch(79% 0.1 150); --color-field-3: oklch(74% 0.11 150); --color-field-ink: var(--color-ink);
  --color-sky: oklch(91% 0.045 225); --color-sky-2: oklch(86% 0.06 225); --color-sky-ink: var(--color-ink);
  --color-accent: oklch(80% 0.13 62); --color-accent-deep: oklch(66% 0.14 50); --color-accent-ink: oklch(27% 0.06 50);
  --color-select: oklch(37% 0.08 160); --color-select-ink: oklch(97% 0.018 155);
  --color-focus: oklch(48% 0.15 40);
  --color-error: oklch(50% 0.17 25); --color-error-wash: oklch(93% 0.035 25);
  --color-success: oklch(45% 0.11 150); --color-success-wash: oklch(92% 0.06 150);
  --color-scrim: oklch(27% 0.05 165 / 0.45); --color-veil: oklch(27% 0.05 165 / 0.25); --color-error-deep: oklch(42% 0.15 25);

  /* Bảng màu vẽ: cây, chậu, đảo, đom đóm. Cây giữ màu tươi ở cả hai chế độ. */
  --art-leaf: oklch(72% 0.16 142); --art-leaf-2: oklch(61% 0.15 147); --art-leaf-3: oklch(85% 0.14 128);
  --art-trunk: oklch(56% 0.08 55); --art-trunk-2: oklch(47% 0.07 50);
  --art-pot: oklch(71% 0.11 50); --art-pot-2: oklch(63% 0.12 44); --art-pot-3: oklch(56% 0.11 42);
  --art-bowl: oklch(74% 0.06 230); --art-bowl-2: oklch(66% 0.07 232);
  --art-soil: oklch(44% 0.06 55); --art-water: oklch(80% 0.08 215); --art-water-2: oklch(72% 0.09 220);
  --art-face: oklch(26% 0.04 50); --art-blush: oklch(79% 0.11 12); --art-shine: oklch(98.5% 0.01 100);
  --art-pink: oklch(84% 0.09 355); --art-pink-2: oklch(72% 0.14 355);
  --art-yellow: oklch(88% 0.16 95); --art-yellow-2: oklch(76% 0.16 70);
  --art-red: oklch(66% 0.19 33); --art-red-2: oklch(57% 0.18 30);
  --art-purple: oklch(72% 0.12 312); --art-purple-2: oklch(61% 0.14 306);
  --art-bamboo: oklch(80% 0.15 122); --art-bamboo-2: oklch(68% 0.14 132);
  --art-cactus: oklch(67% 0.13 152); --art-cactus-2: oklch(58% 0.12 156);
  --art-almond: oklch(74% 0.08 70); --art-coconut: oklch(55% 0.08 60); --art-lotus-seed: oklch(76% 0.12 118);
  --art-wilt: oklch(70% 0.07 88); --art-wilt-2: oklch(60% 0.06 72); --art-wilt-3: oklch(80% 0.05 90);
  --art-grass: oklch(80% 0.14 138); --art-grass-2: oklch(73% 0.14 140); --art-earth: oklch(62% 0.08 55); --art-earth-2: oklch(53% 0.07 50);
  --art-cloud: oklch(99% 0.006 220); --art-firefly: oklch(92% 0.17 115); --art-blanket: oklch(80% 0.09 250); --art-blanket-2: oklch(70% 0.1 252);

  /* Nhãn tập trung: nền nhạt, chữ mực đậm (đo trong DESIGN.md) */
  --tag-1: oklch(88% 0.09 145); --tag-2: oklch(89% 0.06 225); --tag-3: oklch(88% 0.09 70); --tag-4: oklch(89% 0.06 355); --tag-5: oklch(88% 0.06 305); --tag-6: oklch(90% 0.05 95); --tag-7: oklch(89% 0.05 25); --tag-8: oklch(89% 0.05 190);
  --tag-ink: oklch(27% 0.05 165);

  /* Câu đố: vùng ao của Sen Nở, lá và hoa của Cân Đôi, mức đậm của lưới năm */
  --pz-region-1: oklch(90% 0.06 215); --pz-region-2: oklch(90% 0.07 150); --pz-region-3: oklch(91% 0.06 85); --pz-region-4: oklch(90% 0.05 350);
  --pz-region-5: oklch(89% 0.05 300); --pz-region-6: oklch(91% 0.06 120); --pz-region-7: oklch(90% 0.05 40); --pz-region-8: oklch(91% 0.04 250);
  --pz-line: oklch(70% 0.05 165); --pz-wall: var(--color-ink-2);
  --heat-0: var(--color-paper-3); --heat-1: oklch(88% 0.08 145); --heat-2: oklch(78% 0.12 145); --heat-3: oklch(66% 0.14 147); --heat-4: oklch(54% 0.13 150);
  --heat-ink: var(--color-ink); --heat-ink-strong: oklch(98% 0.01 150);
}

/* Đêm trong rừng: nền xanh rừng đêm (không xám), mực trăng, nắng thành đèn lồng. Cây giữ nguyên màu. */
:root[data-mode="dark"] {
  color-scheme: dark;
  --shadow-card: inset 0 0 0 1px oklch(38% 0.04 170);
  --weight-body: 450;
  --color-paper: oklch(21% 0.035 170); --color-paper-2: oklch(25% 0.04 170); --color-paper-3: oklch(29% 0.045 170);
  --color-card: oklch(28% 0.042 170);
  --color-ink: oklch(94.5% 0.022 145); --color-ink-2: oklch(87% 0.03 150); --color-muted: oklch(77% 0.035 160); --color-rule: oklch(38% 0.04 170); --color-edge: oklch(64% 0.04 165);
  --color-field: oklch(27% 0.055 168); --color-field-2: oklch(33% 0.06 165); --color-field-3: oklch(38% 0.065 162); --color-field-ink: var(--color-ink);
  --color-sky: oklch(26% 0.05 235); --color-sky-2: oklch(32% 0.06 235); --color-sky-ink: var(--color-ink);
  --color-accent: oklch(83% 0.13 70); --color-accent-deep: oklch(70% 0.13 58); --color-accent-ink: oklch(24% 0.05 55);
  --color-select: oklch(83% 0.1 150); --color-select-ink: oklch(21% 0.035 170);
  --color-focus: oklch(85% 0.11 72);
  --color-error: oklch(76% 0.13 25); --color-error-wash: oklch(32% 0.06 25);
  --color-success: oklch(80% 0.12 150); --color-success-wash: oklch(30% 0.06 155);
  --color-scrim: oklch(12% 0.03 170 / 0.6); --color-veil: oklch(12% 0.03 170 / 0.4); --color-error-deep: oklch(62% 0.13 25);
  --art-grass: oklch(52% 0.11 150); --art-grass-2: oklch(46% 0.1 152); --art-earth: oklch(42% 0.06 55); --art-earth-2: oklch(36% 0.05 50);
  --art-cloud: oklch(40% 0.03 220); --art-water: oklch(55% 0.08 220); --art-water-2: oklch(48% 0.08 225);
  --pz-region-1: oklch(36% 0.06 220); --pz-region-2: oklch(36% 0.07 155); --pz-region-3: oklch(38% 0.06 85); --pz-region-4: oklch(36% 0.06 350);
  --pz-region-5: oklch(36% 0.06 300); --pz-region-6: oklch(37% 0.07 125); --pz-region-7: oklch(37% 0.06 45); --pz-region-8: oklch(35% 0.05 255);
  --pz-line: oklch(48% 0.05 165); --pz-wall: var(--color-ink-2);
  --heat-0: var(--color-paper-3); --heat-1: oklch(40% 0.08 148); --heat-2: oklch(52% 0.11 147); --heat-3: oklch(66% 0.13 145); --heat-4: oklch(80% 0.13 140);
  --heat-ink: var(--color-ink); --heat-ink-strong: oklch(21% 0.035 170);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    color-scheme: dark;
    --shadow-card: inset 0 0 0 1px oklch(38% 0.04 170);
    --weight-body: 450;
    --color-paper: oklch(21% 0.035 170); --color-paper-2: oklch(25% 0.04 170); --color-paper-3: oklch(29% 0.045 170);
    --color-card: oklch(28% 0.042 170);
    --color-ink: oklch(94.5% 0.022 145); --color-ink-2: oklch(87% 0.03 150); --color-muted: oklch(77% 0.035 160); --color-rule: oklch(38% 0.04 170); --color-edge: oklch(64% 0.04 165);
    --color-field: oklch(27% 0.055 168); --color-field-2: oklch(33% 0.06 165); --color-field-3: oklch(38% 0.065 162); --color-field-ink: var(--color-ink);
    --color-sky: oklch(26% 0.05 235); --color-sky-2: oklch(32% 0.06 235); --color-sky-ink: var(--color-ink);
    --color-accent: oklch(83% 0.13 70); --color-accent-deep: oklch(70% 0.13 58); --color-accent-ink: oklch(24% 0.05 55);
    --color-select: oklch(83% 0.1 150); --color-select-ink: oklch(21% 0.035 170);
    --color-focus: oklch(85% 0.11 72);
    --color-error: oklch(76% 0.13 25); --color-error-wash: oklch(32% 0.06 25);
    --color-success: oklch(80% 0.12 150); --color-success-wash: oklch(30% 0.06 155);
    --color-scrim: oklch(12% 0.03 170 / 0.6); --color-veil: oklch(12% 0.03 170 / 0.4); --color-error-deep: oklch(62% 0.13 25);
    --art-grass: oklch(52% 0.11 150); --art-grass-2: oklch(46% 0.1 152); --art-earth: oklch(42% 0.06 55); --art-earth-2: oklch(36% 0.05 50);
    --art-cloud: oklch(40% 0.03 220); --art-water: oklch(55% 0.08 220); --art-water-2: oklch(48% 0.08 225);
    --pz-region-1: oklch(36% 0.06 220); --pz-region-2: oklch(36% 0.07 155); --pz-region-3: oklch(38% 0.06 85); --pz-region-4: oklch(36% 0.06 350);
    --pz-region-5: oklch(36% 0.06 300); --pz-region-6: oklch(37% 0.07 125); --pz-region-7: oklch(37% 0.06 45); --pz-region-8: oklch(35% 0.05 255);
    --pz-line: oklch(48% 0.05 165); --pz-wall: var(--color-ink-2);
    --heat-0: var(--color-paper-3); --heat-1: oklch(40% 0.08 148); --heat-2: oklch(52% 0.11 147); --heat-3: oklch(66% 0.13 145); --heat-4: oklch(80% 0.13 140);
    --heat-ink: var(--color-ink); --heat-ink-strong: oklch(21% 0.035 170);
  }
}