/* GENERATED by pd proto sync from design-system/tokens.css — do not edit */
/*
 * Design tokens — Nghe Hợp Âm, hướng A "Sổ tay gọn" (directions/round-1/A.md, owner chọn 2026-11-11).
 *
 * Mọi mockup và mọi component chỉ đọc màu, giãn cách, bo góc, đổ bóng và cỡ chữ qua các
 * custom property ở đây. Sửa GIÁ TRỊ ở file này; không bao giờ viết màu hay kích thước
 * cứng ở nơi khác.
 *
 * BỐN QUY TẮC CẤU TRÚC — giữ nguyên khi thay màu, vì mỗi quy tắc sinh ra từ một lỗi thật
 * đã từng làm hỏng cả một bộ mockup:
 *
 * 1. FONT NẠP NGAY TẠI ĐÂY bằng /* Quy tắc 1: hướng A dùng FONT HỆ THỐNG (SF Pro trên iOS, Roboto trên Android) — không có
   webfont nào để nạp, nên không có @import. Đừng thêm tên webfont vào --font-family-base
   mà không nạp nó ngay tại đây. */

:root {
  /* Colour — nền/mặt: nền xám nhạt kiểu iOS, nhóm và thẻ là mặt trắng (không viền, không bóng). */
  --color-bg: #f2f2f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #e5e5ea;

  /* Colour — màu của app: một màu tím chàm duy nhất. */
  --color-primary: #4b3fd1;
  --color-on-primary: #ffffff;
  --color-primary-soft: #eceafd;

  /* Colour — hợp âm đang vang. Hướng A dùng chung tím chàm với primary. Xem quy tắc 3. */
  --color-accent: #4b3fd1;
  --color-on-accent: #ffffff;
  --color-accent-ink: #3e33b8;
  --color-accent-soft: #eceafd;

  /* Colour — chữ và đường */
  --color-text: #1c1c1e;
  --color-text-muted: #636369;
  --color-border: #d1d1d6;
  /* Viền của Ô NHẬP và điều khiển biểu mẫu: ~3:1. Đừng làm nhạt lại. */
  --color-border-strong: #8e8e93;

  /* Colour — trạng thái. --color-live là chấm đỏ "đang nghe" (cùng giá trị với danger,
     tách tên vì nghĩa khác: đang thu, không phải lỗi). */
  --color-danger: #d1281b;
  --color-success: #1d7a46;
  --color-live: #d1281b;
  /* Hợp âm chưa chắc ("?"): chữ cam đậm trên mặt trắng, nền cam rất nhạt. */
  --color-unsure-ink: #9a5400;
  --color-unsure-soft: #fff1dc;

  /* Lớp hình ảnh — mảng màu minh hoạ (phẳng, nhạt), một màu nét chàm đậm. */
  --color-illu-1: #e1ddfb;
  --color-illu-2: #ffe2bd;
  --color-illu-3: #d5ecef;
  --color-illu-4: #f6dde6;
  --color-illu-line: #2b2670;
  /* Chỉ cho vùng mở đầu (tab Nghe) và khoảnh khắc "đã lưu". */
  /* App icon (hướng B, vòng 1, owner chọn 2026-11-11): nền sáng trắng → chàm rất nhạt,
     vạch chàm, một chấm cam. Chỉ dùng cho icon và ảnh store, không dùng trong màn hình app. */
  --color-icon-field-top: #ffffff;
  --color-icon-field-bottom: #e1ddfb;
  --color-icon-ink: #4b3fd1;
  --color-icon-dot: #f08a1c;
  --color-icon-shadow: #2b2670;
  /* Ảnh store (vòng 2, owner muốn màu hợp người chơi nhạc cụ): sân khấu tối ấm, cần đàn
     gỗ hồng, dây đồng, ánh đèn cam. Chỉ dùng cho ảnh store và banner Play. */
  --color-store-stage-top: #17122e;
  --color-store-stage-bottom: #3a2216;
  --color-store-glow: #f08a1c;
  --color-store-wood: #5a3620;
  --color-store-wood-edge: #2a170c;
  --color-store-fret: #c9a77a;
  --color-store-string: #ead6b0;
  --color-store-inlay: #f3e6cf;
  --color-store-subline: #f6dfc0;
  --gradient-hero: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-bg) 70%);
  --gradient-accent: linear-gradient(160deg, var(--color-accent-soft) 0%, var(--color-surface) 70%);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);

  /* Typography — font hệ thống */
  --font-family-base: -apple-system, "SF Pro Text", system-ui, Roboto, "Segoe UI", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  /* Bậc lớn nhất, dành riêng cho TÊN HỢP ÂM ĐANG VANG. Đừng dùng cho chữ thường. */
  --font-size-2xl: 2.5rem;
  /* Cỡ chữ nhãn BÊN TRONG SVG (sơ đồ bấm): tính theo đơn vị viewBox, không theo rem. */
  --chart-label-size: 8px; /* px trong SVG = đơn vị viewBox; thiếu đơn vị thì trình duyệt bỏ qua */

  /* Spacing — nhịp 4/8 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Đường viền, vùng chạm, biểu tượng */
  --border-hairline: 1px;
  --border-focus: 2px;
  --border-thick: 3px;
  --tap-target: 2.75rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-size-xl: 2rem;
  --icon-stroke: 2;
  /* Kích thước thật của một minh hoạ (trạng thái rỗng, lỗi, đã lưu). */
  --illu-size: 8rem;

  /* Radii — 4 bậc: chip/nút nhỏ, nhóm và nút, sheet, viên thuốc */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  /* Elevation — mặc định phẳng; md chỉ cho ô đang chọn trong segmented; lg cho sheet. */
  --shadow-sm: none;
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* ============================================================
   CHẾ ĐỘ TỐI — chỉ khi bị ép bằng data-theme="dark" (xem quy tắc 2 ở đầu file).
   PRD không có chế độ tối: khối này chưa được duyệt, không theo hệ điều hành.
   ============================================================ */
:root[data-theme="dark"] {
  --color-bg: #000000;
  --color-surface: #1c1c1e;
  --color-surface-sunken: #2c2c2e;
  --color-primary: #8f86ff;
  --color-on-primary: #0d0a33;
  --color-primary-soft: #221f4a;
  --color-accent: #8f86ff;
  --color-on-accent: #0d0a33;
  --color-accent-ink: #a9a2ff;
  --color-accent-soft: #221f4a;
  --color-text: #f2f2f7;
  --color-text-muted: #a1a1a8;
  --color-border: #38383a;
  --color-border-strong: #6c6c70;
  --color-danger: #ff6b5e;
  --color-success: #4cd37f;
  --color-live: #ff6b5e;
  --color-unsure-ink: #ffb454;
  --color-unsure-soft: #3a2a10;
  --color-illu-1: #2a2660;
  --color-illu-2: #4a3512;
  --color-illu-3: #17393d;
  --color-illu-4: #44222f;
  --color-illu-line: #e1ddfb;
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7);
}