/* Design tokens — nguồn: handoff-spec.md §1.
   Khi có design-system.html thật, thay block :root này cho khớp 100%. */
:root {
  /* Surfaces */
  --bg-base: #0E0F1A;
  --bg-calm: #15182B;
  --bg-focus: #1A1722;
  --bg-dim: #05060C;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.10);

  /* Calm accent (teal) */
  --calm: #9FE1CB;
  --calm-fill: rgba(159, 225, 203, 0.12);
  --calm-border: rgba(159, 225, 203, 0.50);

  /* Focus accent (amber) */
  --focus: #F5B774;
  --focus-fill: rgba(245, 183, 116, 0.14);
  --focus-border: rgba(245, 183, 116, 0.50);

  /* Text */
  --text-1: rgba(255, 255, 255, 0.92);
  --text-2: rgba(255, 255, 255, 0.55);
  --text-3: rgba(255, 255, 255, 0.40);

  /* Borders */
  --border-soft: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Status */
  --done: #8FD49B;

  /* Radii */
  --r-md: 10px;
  --r-lg: 14px;
  --r-card: 18px;
  --r-screen: 30px;
  --r-pill: 999px;

  /* Type scale (px) */
  --fs-display: 34px;
  --fs-title: 18px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 11px;

  /* Fonts */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Spacing (multiples of 4) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* The active accent — switched by [data-space] below */
  --accent: var(--calm);
  --accent-fill: var(--calm-fill);
  --accent-border: var(--calm-border);
  --bg-room: var(--bg-calm);
}

/* Space switch: only accent + room bg change; layout stays. (spec §0) */
[data-space="calm"] {
  --accent: var(--calm);
  --accent-fill: var(--calm-fill);
  --accent-border: var(--calm-border);
  --bg-room: var(--bg-calm);
}
[data-space="focus"] {
  --accent: var(--focus);
  --accent-fill: var(--focus-fill);
  --accent-border: var(--focus-border);
  --bg-room: var(--bg-focus);
}