/*
 * SEED design tokens v2.0 · 2026-10-11
 * Nguồn: bộ "SEED-RNT Tokens v2" (Ít hơn. Rõ hơn.): một màu hành động, bốn màu trạng thái, còn lại là thang xám;
 * một họ chữ hệ thống; phân cấp bằng chữ, ít viền, ít bóng.
 * Ba lớp: màu gốc v2 (--seed-*) → ngữ nghĩa (--color-*, --text-*, ...) → thành phần (styles.css).
 * Giao diện chỉ dùng lớp ngữ nghĩa. Tên ngữ nghĩa giữ như v0.1 để thành phần chạy ngay; giá trị lấy từ v2.
 * Tỉ lệ tương phản ghi cạnh từng cặp chữ/nền (WCAG 2.2, ngưỡng AA: 4.5 chữ thường, 3 chữ lớn và viền điều khiển).
 */

:root {
  /* ---------- Lớp 1 · màu gốc v2 ---------- */
  /* Chữ và bề mặt */
  --seed-label: #1D1D1F;        /* chữ chính */
  --seed-label-2: #636366;      /* chữ phụ, nhãn trường, mô tả · v2 gốc #6E6E73, sẫm hơn để đạt AA trên nền xám */
  --seed-label-3: #86868B;      /* placeholder, trạng thái tắt, viền ô nhập */
  --seed-bg: #FFFFFF;           /* thẻ, bảng, khung nội dung */
  --seed-bg-grouped: #F5F5F7;   /* nền trang, nhóm thẻ */
  --seed-fill: #E8E8ED;         /* ô tìm kiếm, segmented, nút phụ, nhãn xám */
  --seed-separator: #D2D2D7;    /* đường kẻ dòng */
  /* Hành động: xanh dương nghĩa là bấm được */
  --seed-tint: #0066CC;         /* nút chính, liên kết, mục đang chọn · v2 gốc #0071E3, sẫm hơn để đạt AA trên nền xám */
  --seed-tint-soft: #E6F0FC;    /* nền dòng chọn, chip lọc đang bật */
  /* Trạng thái: mỗi màu một nghĩa */
  --seed-ok: #1E7B34;        --seed-ok-soft: #EAF5EC;         /* đầy đủ, đạt, đã ban hành */
  --seed-partial: #B25000;   --seed-partial-soft: #FFF2E3;    /* một phần, cờ mở, cần thẩm định lại */
  --seed-blocked: #D70015;   --seed-blocked-soft: #FDECEE;    /* bị chặn, ràng buộc cứng, tạm dừng */
  --seed-protected: #8944AB; --seed-protected-soft: #F4ECF8;  /* loài nhạy cảm S1–S3, dữ liệu bị ẩn */
  --seed-white: #FFFFFF;

  /* ---------- Lớp 2 · ngữ nghĩa ---------- */
  --color-bg: var(--seed-bg-grouped);
  --color-surface: var(--seed-bg);
  --color-surface-sunken: var(--seed-fill);
  --color-text: var(--seed-label);              /* 16.8 trên trắng · 15.5 trên nền */
  --color-text-muted: var(--seed-label-2);      /* 6.0 trên trắng · 5.5 trên nền · 4.9 trên --seed-fill */
  --color-text-disabled: var(--seed-label-3);   /* 3.6; chỉ cho trạng thái tắt */
  --color-border: var(--seed-separator);        /* đường kẻ trang trí, không làm viền điều khiển */
  --color-border-control: var(--seed-label-3);  /* 3.6 trên trắng: viền ô nhập, ô chọn */
  --color-focus: var(--seed-tint);              /* 5.6 trên trắng */
  --color-scrim: rgb(0 0 0 / 0.4);              /* nền mờ sau hộp thoại, ngăn trượt */

  --color-brand: var(--seed-tint);              /* chữ trắng trên nền này: 5.6 · 4.6 trên --seed-fill · 4.8 trên --seed-tint-soft */
  --color-brand-hover: color-mix(in srgb, var(--seed-tint) 85%, black);
  --color-brand-soft: var(--seed-tint-soft);
  --color-on-brand: var(--seed-white);
  --color-identity: var(--seed-label);          /* chữ SEED, nền tối của biểu tượng */

  /* Trạng thái: luôn đi kèm biểu tượng và chữ, không dùng màu một mình */
  --color-ok: var(--seed-ok);             --color-ok-soft: var(--seed-ok-soft);             /* 4.8 */
  --color-warn: var(--seed-partial);      --color-warn-soft: var(--seed-partial-soft);      /* 4.7 */
  --color-warn-border: var(--seed-partial);                                                 /* 5.2 trên trắng */
  --color-block: var(--seed-blocked);     --color-block-soft: var(--seed-blocked-soft);     /* 4.7; chữ trắng trên đỏ 5.4 */
  --color-block-hover: color-mix(in srgb, var(--seed-blocked) 85%, black);
  --color-protect: var(--seed-protected); --color-protect-soft: var(--seed-protected-soft); /* 5.2 */
  /* v2 không có màu "thông tin": thứ không phải hành động hay bốn trạng thái thì là xám */
  --color-info: var(--seed-label);        --color-info-soft: var(--seed-fill);              /* 13.8 */
  --color-neutral: var(--seed-label);     --color-neutral-soft: var(--seed-fill);           /* 13.8 */

  /* Chất liệu mờ: chỉ cho thanh trên cùng và ray trạm khi cuộn */
  --material: rgb(255 255 255 / 0.72);
  --material-filter: saturate(180%) blur(20px);

  /* ---------- Chữ ---------- */
  /* Một họ chữ hệ thống: SF Pro trên máy Apple, Be Vietnam Pro trên máy khác; cả hai đủ dấu tiếng Việt.
     Bản thật tự lưu tệp Be Vietnam Pro (Field chạy khi mất sóng; dữ liệu lưu trong nước). */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Be Vietnam Pro", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* chỉ cho mã như D074, T-CG-A */

  /* Thang chữ v2 · cỡ/dòng */
  --text-footnote: 0.75rem;    /* 12/16 · nhỏ nhất được phép */
  --text-subhead: 0.8125rem;   /* 13/18 · nhãn trường, chú thích dưới tiêu đề */
  --text-callout: 0.875rem;    /* 14/20 · ô bảng, nội dung thẻ */
  --text-body: 0.9375rem;      /* 15/22 · chữ thân */
  --text-headline: 1.0625rem;  /* 17/22 · 600 */
  --text-title2: 1.375rem;     /* 22/28 · 600 */
  --text-title1: 1.75rem;      /* 28/34 · 600 */
  --text-display: 2.5rem;      /* 40/44 · 600 */
  /* Tên v0.1 trỏ về thang v2 để thành phần hiện có chạy ngay */
  --text-xs: var(--text-subhead);
  --text-sm: var(--text-callout);
  --text-md: var(--text-body);
  --text-lg: var(--text-headline);
  --text-xl: var(--text-title2);
  --text-2xl: var(--text-title1);
  --text-3xl: var(--text-title1);
  --text-4xl: var(--text-display);
  --leading-tight: 1.2;    /* tiêu đề */
  --leading-snug: 1.3;     /* headline */
  --leading-normal: 1.47;  /* chữ thân */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;  /* v2: mọi tiêu đề */
  --weight-bold: 700;      /* v2: chỉ cho chữ SEED */
  --measure: 68ch;         /* độ dài dòng tối đa của đoạn văn */

  /* ---------- Khoảng cách: lưới 4 pt của v2 (4 8 12 16 20 24 32 40 56) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3.5rem;   /* 56 */

  /* ---------- Bo góc ---------- */
  --radius-sm: 6px;     /* chip, mã */
  --radius-md: 10px;    /* nút, ô nhập */
  --radius-lg: 14px;    /* thẻ */
  --radius-xl: 20px;    /* khung lớn, hộp thoại, ngăn trượt */
  --radius-pill: 999px; /* nhãn trạng thái */

  /* ---------- Chiều sâu: khối thường dùng nền xám và khoảng trắng, không dùng bóng ---------- */
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 1px var(--seed-fill);  /* thẻ */
  --shadow-overlay: 0 8px 30px rgb(0 0 0 / 0.12);                            /* popover, hộp thoại */

  /* ---------- Chuyển động: chỉ khi trả lời thao tác của người dùng ---------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ---------- Kích thước ---------- */
  --control-h: 2.25rem;   /* 36: ô điều khiển */
  --target-min: 2.75rem;  /* 44: vùng chạm tối thiểu */
  --row-h: 2.75rem;       /* 44: dòng bảng */
  --bar-h: 3.25rem;       /* 52: thanh trên cùng */
  --border-control: 1px;
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

/* ---------- SEED Field: ngoài trời, nắng gắt, một tay ---------- */
/* v2 chưa có bộ riêng cho Field; giữ quy tắc v0.1: chữ phụ đậm hơn, cỡ chữ lớn hơn, vùng chạm 48 px */
[data-surface="field"] {
  --color-bg: var(--seed-bg);
  --color-text: var(--seed-label);              /* 16.8 */
  --color-text-muted: #3A3A3C;                  /* 11.4; ngoài thang v2 để đọc được ngoài nắng */
  --color-border-control: var(--seed-label-2);  /* 6.0 */
  --border-control: 2px;
  --text-xs: 0.9375rem;  /* 15 */
  --text-sm: 1rem;       /* 16 */
  --text-md: 1.125rem;   /* 18, chữ thân */
  --text-lg: 1.3125rem;  /* 21 */
  --text-xl: 1.625rem;   /* 26 */
  --text-2xl: 2rem;      /* 32 */
  --control-h: 3rem;     /* 48 px */
  --target-min: 3rem;    /* ≥ 44 px theo yêu cầu Field */
}

/* ---------- Decision Brief: bản in, PDF ---------- */
[data-surface="brief"] {
  --color-bg: var(--seed-bg);
}

/* ---------- Chế độ tối v2: định nghĩa sẵn, V1 chưa bật ---------- */
/* Bật bằng data-theme="dark" trên <html> sau khi thành phần bỏ hết màu viết cứng.
   v2 chưa cho giá trị tối của --material; chữ trắng trên --seed-tint tối chỉ đạt 3.7. */
:root[data-theme="dark"] {
  --seed-label: #F5F5F7;        /* 15.6 trên --seed-bg tối */
  --seed-label-2: #A1A1A6;      /* 6.6 */
  --seed-label-3: #6E6E73;      /* 3.4 */
  --seed-bg: #1C1C1E;
  --seed-bg-grouped: #000000;
  --seed-fill: #2C2C2E;
  --seed-separator: #38383A;
  --seed-tint: #0A84FF;         /* 4.7 */
  --seed-tint-soft: rgb(10 132 255 / 0.18);
  --seed-ok: #30D158;        --seed-ok-soft: rgb(48 209 88 / 0.16);
  --seed-partial: #FF9F0A;   --seed-partial-soft: rgb(255 159 10 / 0.16);
  --seed-blocked: #FF453A;   --seed-blocked-soft: rgb(255 69 58 / 0.16);
  --seed-protected: #BF5AF2; --seed-protected-soft: rgb(191 90 242 / 0.18);
}