/* Hallmark · genre: modern-minimal · theme: Cobalt (Be Vietnam Pro) · design-system: design.md · designed-as-app
 * axes: paper-band light (dark via prefers-color-scheme) · display grotesk-sans · accent cool (hue 262)
 *
 * Token duy nhất của cả web. Trang CSS chỉ được tham chiếu var(--…) ở đây —
 * không viết hex/oklch/tên font trực tiếp. Cần màu mới thì thêm token trước.
 *
 * data-scheme="light|dark" trên <html> ép một chế độ bất kể hệ thống
 * (brand-runtime.js dùng nó khi studio chọn màu nền riêng cho gallery).
 */

:root {
  color-scheme: light;

  /* ── Bề mặt ─────────────────────────────────────────────────────────── */
  --color-paper:      oklch(98.4% 0.004 262);
  --color-surface:    oklch(99.6% 0.002 262);
  --color-paper-2:    oklch(96.4% 0.006 262);
  --color-paper-3:    oklch(93.6% 0.008 262);

  /* ── Chữ ────────────────────────────────────────────────────────────── */
  --color-ink:        oklch(22% 0.02 262);
  --color-ink-2:      oklch(36% 0.018 262);
  --color-muted:      oklch(51% 0.016 262);
  --color-faint:      oklch(66% 0.012 262);
  /* Chữ cố định theo nền, KHÔNG đảo ở chế độ tối — cho khung xem trước màu
     studio trong portal (nền sáng/tối do resolvePaper quyết định). */
  --color-ink-on-light: oklch(22% 0.02 262);
  --color-ink-on-dark:  oklch(94.5% 0.006 262);

  /* ── Kẻ ─────────────────────────────────────────────────────────────── */
  --color-rule:       oklch(91.5% 0.008 262);
  --color-rule-2:     oklch(80% 0.012 262);
  --color-rule-3:     oklch(64% 0.014 262);

  /* ── Nhấn (cobalt-indigo) ───────────────────────────────────────────── */
  --color-accent:       oklch(52% 0.19 262);
  --color-accent-hover: oklch(46% 0.19 262);
  --color-accent-ink:   oklch(99% 0.004 262);
  --color-accent-soft:  oklch(95.2% 0.028 262);
  --color-accent-text:  oklch(45% 0.18 262);
  --color-focus:        oklch(55% 0.2 262);

  /* ── Trạng thái — luôn đi kèm chữ, không dùng màu đơn độc ───────────── */
  --color-danger:       oklch(51% 0.18 25);
  --color-danger-soft:  oklch(95.6% 0.022 25);
  --color-warn:         oklch(47% 0.11 65);
  --color-warn-soft:    oklch(95.8% 0.045 88);
  --color-success:      oklch(46% 0.11 155);
  --color-success-soft: oklch(95.6% 0.03 155);

  /* ── Dải than chì (một nhịp tối duy nhất) + lớp phủ ────────────────── */
  --color-graphite:       oklch(21% 0.018 262);
  --color-graphite-2:     oklch(27% 0.02 262);
  --color-graphite-ink:   oklch(95.5% 0.006 262);
  --color-graphite-muted: oklch(73% 0.014 262);
  --color-scrim:          oklch(18% 0.02 262 / 0.48);
  --color-overlay:        oklch(13% 0.014 262 / 0.95);
  --color-overlay-ink:    oklch(96% 0.006 262);
  --color-overlay-chip:   oklch(96% 0.006 262 / 0.14);
  --color-topbar:         oklch(98.4% 0.004 262 / 0.88);

  --shadow-pop: 0 18px 40px -16px oklch(22% 0.03 262 / 0.32);

  /* ── Chữ ────────────────────────────────────────────────────────────── */
  --font-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Không còn font mono: cả web chỉ dùng Be Vietnam Pro. Chuỗi máy đọc (mã,
     HWID) phân biệt bằng tabular-nums + letter-spacing — xem .mono ở portal.css. */

  --text-2xs: 0.75rem;     /* 12 — nhãn bảng, meta */
  --text-xs:  0.8125rem;   /* 13 */
  --text-sm:  0.875rem;    /* 14 — ô bảng */
  --text-ui:  0.9375rem;   /* 15 — chữ giao diện portal */
  --text-base: 1rem;       /* 16 — chữ đọc gallery */
  --text-md:  1.125rem;    /* 18 */
  --text-lg:  1.375rem;    /* 22 */
  --text-xl:  1.75rem;     /* 28 */
  --text-2xl: 2.25rem;     /* 36 */
  --text-display: clamp(1.875rem, 3.2vw + 1rem, 3rem);

  --tracking-display: -0.022em;
  --tracking-label:   0.04em;

  /* ── Khoảng cách 4pt ────────────────────────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ── Hình khối ──────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;
  --rule-w:      1px;

  --control-h:    2.5rem;   /* 40 */
  --control-h-sm: 2rem;     /* 32 */
  --tap:          2.75rem;  /* 44 */

  /* ── Lớp ────────────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;
  --z-scrim:    300;
  --z-sheet:    310;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Chuyển động ────────────────────────────────────────────────────── */
  --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);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  320ms;
}

/* ── Chế độ tối: theo hệ thống, hoặc ép bằng data-scheme="dark" ─────────
   Khối giá trị lặp lại hai lần là có chủ đích: media query không gộp được
   với selector thuộc tính. */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    color-scheme: dark;
    --color-paper:      oklch(16% 0.012 262);
    --color-surface:    oklch(19.5% 0.014 262);
    --color-paper-2:    oklch(22.5% 0.015 262);
    --color-paper-3:    oklch(26% 0.016 262);
    --color-ink:        oklch(94.5% 0.006 262);
    --color-ink-2:      oklch(83% 0.01 262);
    --color-muted:      oklch(70% 0.014 262);
    --color-faint:      oklch(55% 0.014 262);
    --color-rule:       oklch(28% 0.014 262);
    --color-rule-2:     oklch(38% 0.016 262);
    --color-rule-3:     oklch(52% 0.016 262);
    --color-accent:       oklch(72% 0.13 262);
    --color-accent-hover: oklch(78% 0.11 262);
    --color-accent-ink:   oklch(17% 0.03 262);
    --color-accent-soft:  oklch(28% 0.055 262);
    --color-accent-text:  oklch(80% 0.11 262);
    --color-focus:        oklch(74% 0.14 262);
    --color-danger:       oklch(72% 0.14 25);
    --color-danger-soft:  oklch(27% 0.05 25);
    --color-warn:         oklch(80% 0.11 80);
    --color-warn-soft:    oklch(28% 0.045 80);
    --color-success:      oklch(76% 0.12 155);
    --color-success-soft: oklch(26% 0.04 155);
    --color-graphite:       oklch(11.5% 0.01 262);
    --color-graphite-2:     oklch(17% 0.012 262);
    --color-scrim:          oklch(6% 0.01 262 / 0.6);
    --color-topbar:         oklch(16% 0.012 262 / 0.86);
    --shadow-pop: 0 18px 40px -16px oklch(4% 0.01 262 / 0.7);
  }
}
:root[data-scheme="dark"] {
  color-scheme: dark;
  --color-paper:      oklch(16% 0.012 262);
  --color-surface:    oklch(19.5% 0.014 262);
  --color-paper-2:    oklch(22.5% 0.015 262);
  --color-paper-3:    oklch(26% 0.016 262);
  --color-ink:        oklch(94.5% 0.006 262);
  --color-ink-2:      oklch(83% 0.01 262);
  --color-muted:      oklch(70% 0.014 262);
  --color-faint:      oklch(55% 0.014 262);
  --color-rule:       oklch(28% 0.014 262);
  --color-rule-2:     oklch(38% 0.016 262);
  --color-rule-3:     oklch(52% 0.016 262);
  --color-accent:       oklch(72% 0.13 262);
  --color-accent-hover: oklch(78% 0.11 262);
  --color-accent-ink:   oklch(17% 0.03 262);
  --color-accent-soft:  oklch(28% 0.055 262);
  --color-accent-text:  oklch(80% 0.11 262);
  --color-focus:        oklch(74% 0.14 262);
  --color-danger:       oklch(72% 0.14 25);
  --color-danger-soft:  oklch(27% 0.05 25);
  --color-warn:         oklch(80% 0.11 80);
  --color-warn-soft:    oklch(28% 0.045 80);
  --color-success:      oklch(76% 0.12 155);
  --color-success-soft: oklch(26% 0.04 155);
  --color-graphite:       oklch(11.5% 0.01 262);
  --color-graphite-2:     oklch(17% 0.012 262);
  --color-scrim:          oklch(6% 0.01 262 / 0.6);
  --color-topbar:         oklch(16% 0.012 262 / 0.86);
  --shadow-pop: 0 18px 40px -16px oklch(4% 0.01 262 / 0.7);
}