/* ==========================================================================
   taing.dev · "Sổ dán công nghệ" · Design tokens v1.0
   Gộp và chuẩn hoá từ Google Stitch (dark_mode + light_mode).
   Ba tầng:
     1. Primitive (không đổi theo chế độ): font, cỡ chữ, khoảng cách, bo góc, độ nghiêng.
     2. Semantic (đổi theo chế độ): nền, chữ, đường kẻ, nhấn, bề mặt.
     3. Component (đổi theo chế độ): giấy, băng dính, vé, tem, nhãn chủ đề.
   Quy tắc: component chỉ dùng token, không viết mã màu trực tiếp.
   Chế độ: :root mặc định TỐI; [data-theme="light"] là sáng. Có thể gắn
   data-theme lên bất kỳ phần tử nào để xem cục bộ (trang design-system dùng cách này).
   ========================================================================== */

:root {
  /* ---------- 1. Primitive ---------- */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Cỡ chữ. Nhỏ nhất 11px (Stitch dùng 9–10px, quá nhỏ cho dấu tiếng Việt). */
  --fs-label-sm: 0.6875rem;   /* 11px  nhãn mono phụ */
  --fs-label: 0.75rem;        /* 12px  nhãn mono, nút */
  --fs-body-sm: 0.875rem;     /* 14px  trích đoạn thẻ */
  --fs-body: 1rem;            /* 16px */
  --fs-body-lg: 1.125rem;     /* 18px  đoạn dẫn bài nổi bật */
  --fs-lead: 1.25rem;         /* 20px  đoạn dẫn hero */
  --fs-h3: 1.25rem;           /* 20px  tiêu đề thẻ */
  --fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);      /* 24 → 36 */
  --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); /* 36 → 60 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Trục optical size của Newsreader: số nhỏ = nét mảnh dày hơn, đọc chắc trên màn hình.
     Để "auto" thì chữ in nghiêng cỡ 24px có nét đứng chữ N rất mảnh (Owner phản hồi v0). */
  --opsz-heading: 14;
  --opsz-display: 24;
  --lh-display: 1.12;
  --lh-heading: 1.3;
  --lh-body: 1.65;
  --lh-label: 1.4;

  --track-tight: -0.02em;
  --track-label: 0.08em;
  --track-wide: 0.14em;

  /* Khoảng cách: bậc 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Bố cục */
  --container: 72rem;          /* 1152px */
  --gutter-mobile: 1rem;
  --tap: 2.5rem;               /* 40px vùng chạm tối thiểu cho nút icon */
  --card-lift: -3px;           /* hover chung của mọi thẻ bấm được */
  --gutter: 1.5rem;
  --section-gap: 3rem;

  /* Bo góc: giấy thật không bo; chỉ nhãn dán và số trang là tròn */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-full: 999px;

  /* Đường viền giấy: mép trên-trái mảnh, mép dưới-phải dày tạo độ dày tờ giấy */
  --border-thin: 1px;
  --border-thick: 2px;

  /* Độ nghiêng của mảnh giấy (tắt dưới 640px) */
  --tilt-xs: 0.5deg;
  --tilt-sm: 0.8deg;
  --tilt-md: 1deg;
  --tilt-lg: 2deg;
  --tilt-xl: 3deg;

  --tape-height: 19px;
  --duration: 160ms;
}

/* ---------- 2 & 3. Chế độ TỐI (mặc định) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Nền & chữ */
  --bg: #161311;
  --bg-dot: #2d2621;
  --text-strong: #f5f1e8;
  --text: #ded6c9;
  --text-muted: #a8a29e;
  --text-subtle: #8f8780;
  --line: #3e3227;
  --line-strong: #524132;
  --line-soft: #2b221a;

  /* Bề mặt UI */
  --surface-sheet: #221c17;
  --surface-chip: #241e19;
  --surface-inset: #1a1512;
  --surface-track: #1c1713;
  --surface-track-active: #3d2f24;
  --sheet-edge-hi: #3a2f26;
  --sheet-edge-lo: #16120e;

  /* Nhấn */
  --accent: #d97706;
  --accent-hover: #b45309;
  --on-accent: #161311;
  --accent-edge: #874304;
  --kicker: #ef6a52;
  --label: #ffb77d;
  --reading-time: #f59e0b;
  --wavy: #d97706;
  --highlight-bg: #b45309;
  --highlight-fg: #fffbeb;
  --badge-bg: #8b2316;
  --badge-fg: #fed7aa;
  --focus: #f59e0b;
  --selection-bg: #d97706;
  --selection-fg: #161311;

  /* Nút đảo màu (ĐỌC CẢ TRANG) */
  --btn-inverse-bg: #eae5db;
  --btn-inverse-hover: #f5f2eb;
  --btn-inverse-fg: #161311;
  --btn-inverse-edge: #c4bcad;

  /* Nút đổi chế độ: nổi bật ở tối, chìm ở sáng */
  --theme-btn-bg: #d97706;
  --theme-btn-hover: #b45309;
  --theme-btn-fg: #161311;
  --theme-btn-edge: #d97706;

  /* Đổ bóng giấy */
  --shadow-tape: 0 2px 4px rgba(0, 0, 0, 0.45);
  --shadow-paper-sm: 4px 6px 14px rgba(0, 0, 0, 0.55);
  --shadow-paper-md: 5px 7px 20px rgba(0, 0, 0, 0.6);
  --shadow-paper-lg: 6px 8px 24px rgba(0, 0, 0, 0.65);
  --shadow-control: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.45);

  /* Giấy kẻ dòng */
  --paper-lined-bg: #211d19;
  --paper-lined-rule: #2d2722;

  /* 6 loại giấy cho thẻ bài: bg · title · body · label · meta · rule · edge-hi · edge-lo */
  --paper-lined-title: #ffffff;
  --paper-lined-body: #d6cec3;
  --paper-lined-label: #ffb4a5;
  --paper-lined-meta: #a8a29e;
  --paper-lined-edge-hi: #3a3028;
  --paper-lined-edge-lo: #120f0c;
  --paper-lined-dash: #44382e;

  --paper-plum-bg: #2b1d2a;
  --paper-plum-title: #ffffff;
  --paper-plum-body: #dfcbd8;
  --paper-plum-label: #f2b3cd;
  --paper-plum-meta: #b9a6b3;
  --paper-plum-edge-hi: #4d334b;
  --paper-plum-edge-lo: #1a1019;
  --paper-plum-dash: #533751;

  --paper-ivory-bg: #eae5db;
  --paper-ivory-title: #0c0a09;
  --paper-ivory-body: #2a2622;
  --paper-ivory-label: #78350f;
  --paper-ivory-meta: #57534e;
  --paper-ivory-edge-hi: #eae5db;
  --paper-ivory-edge-lo: #b5ad9e;
  --paper-ivory-dash: #c4bcad;

  --paper-clay-bg: #261e19;
  --paper-clay-title: #ffedd5;
  --paper-clay-body: #ded3c5;
  --paper-clay-label: #ffb4a5;
  --paper-clay-meta: #a8a29e;
  --paper-clay-edge-hi: #42342b;
  --paper-clay-edge-lo: #16110d;
  --paper-clay-dash: #44382e;

  --paper-honey-bg: #3b2814;
  --paper-honey-title: #fef9c3;
  --paper-honey-body: #ded8be;
  --paper-honey-label: #ffb77d;
  --paper-honey-meta: #b8ab97;
  --paper-honey-edge-hi: #6b461f;
  --paper-honey-edge-lo: #1a1006;
  --paper-honey-dash: #6b461f;

  --paper-draft-bg: #241f1a;
  --paper-draft-title: #ffffff;
  --paper-draft-body: #ded6c9;
  --paper-draft-label: #ffb77d;
  --paper-draft-dash: #8c7456;
  --paper-draft-btn-bg: #1a1613;
  --paper-draft-btn-fg: #f59e0b;
  --paper-draft-btn-edge: #524132;

  /* Giấy ghi chú (hero) */
  --note-bg: #4d3319;
  --note-fg: #fff8d4;
  --note-label: #fde047;
  --note-edge: #784618;

  /* Thẻ ẩn dụ (cạnh bài nổi bật) */
  --contact-bg: #3d2914;
  --contact-title: #ffffff;
  --contact-body: #fef9c3;
  --contact-label: #fde047;
  --contact-rule: #8c7a36;
  --contact-row-bg: #2a1c0e;
  --contact-row-key: #d6d3d1;
  --contact-row-val-1: #fde047;
  --contact-row-val-2: #ffb77d;
  --contact-edge: #7a4a1a;

  /* Vé vào cửa & tem bưu chính */
  --ticket-bg: #a83220;
  --ticket-edge: #bd4430;
  --ticket-fg: #ffffff;
  --ticket-fg-soft: #ffe4dc;
  --stamp-bg: #382433;
  --stamp-dash: #7a5071;
  --stamp-fg: #ffffff;
  --stamp-label: #ffb77d;
  --stamp-sub: #e5b9d5;
  --staple: #736b63;
  --shadow-staple: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --ticket-perforation: rgba(255, 255, 255, 0.45);
  --scrim: rgba(10, 8, 6, 0.7);
  --clip: #b8b0a6;
  --clip-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.7);

  /* Băng dính washi */
  --tape-kraft: #c88a38;
  --tape-sand: #b89569;
  --tape-rose: #9c506d;
  --tape-plum: #a85876;
  --tape-mauve: #8c5a75;
  --tape-amber: #d97706;
  --tape-brick: #b93c28;

  /* Phân trang */
  --page-current-bg: #36271c;
  --page-current-fg: #ffdcc3;
  --page-current-edge: #d97706;

  /* Newsletter (phong bì) */
  --envelope-bg: #201b17;
  --input-bg: #15110e;
  --input-edge: #3e3227;
  --input-fg: #ffffff;
  --input-placeholder: #8f8780;

  /* 4 chủ đề: nền nhãn dán · chữ · viền · chấm màu nhận diện */
  --pillar-infra-bg: #8b2316;
  --pillar-infra-fg: #fee2e2;
  --pillar-infra-edge: #b93c28;
  --pillar-infra-dot: #ffb4a5;
  --pillar-agent-bg: #5c2f54;
  --pillar-agent-fg: #fbebf7;
  --pillar-agent-edge: #85447a;
  --pillar-agent-dot: #f49fc1;
  --pillar-growth-bg: #4a2e1b;
  --pillar-growth-fg: #fed7aa;
  --pillar-growth-edge: #784628;
  --pillar-growth-dot: #fb923c;
  --pillar-learn-bg: #3b2814;
  --pillar-learn-fg: #ffdcc3;
  --pillar-learn-edge: #7a4a1a;
  --pillar-learn-dot: #d97706;
}

/* ---------- Chế độ SÁNG ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg: #fcf9f3;
  --bg-dot: #e6ddd0;
  --text-strong: #1e1510;
  --text: #4a3b30;
  --text-muted: #5f5249;
  --text-subtle: #786a5f;
  --line: #d9cec0;
  --line-strong: #c7b5a0;
  --line-soft: #e8ded1;

  --surface-sheet: #fffdfa;
  --surface-chip: #fffdfa;
  --surface-inset: #f9f4ed;
  --surface-track: #f2eae0;
  --surface-track-active: #ffffff;
  --sheet-edge-hi: #ebe2d6;
  --sheet-edge-lo: #d9cebe;

  --accent: #c2410c;
  --accent-hover: #9a3412;
  --on-accent: #ffffff;
  --accent-edge: #7c2d12;
  --kicker: #c2410c;
  --label: #9a3412;
  --reading-time: #8a6006;
  --wavy: #d97706;
  --highlight-bg: #fde047;
  --highlight-fg: #18110b;
  --badge-bg: #c2410c;
  --badge-fg: #fff5eb;
  --focus: #c2410c;
  --selection-bg: #fde047;
  --selection-fg: #18110b;

  --btn-inverse-bg: #211812;
  --btn-inverse-hover: #32251c;
  --btn-inverse-fg: #fefaf4;
  --btn-inverse-edge: #1a130f;

  --theme-btn-bg: #f0e6d6;
  --theme-btn-hover: #e4d8c5;
  --theme-btn-fg: #1f1610;
  --theme-btn-edge: #cfbeab;

  --shadow-tape: 0 2px 5px rgba(0, 0, 0, 0.18);
  --shadow-paper-sm: 0 4px 14px rgba(60, 45, 35, 0.08);
  --shadow-paper-md: 0 6px 20px rgba(60, 45, 35, 0.08);
  --shadow-paper-lg: 0 8px 24px rgba(60, 45, 35, 0.09);
  --shadow-control: 0 1px 2px rgba(60, 45, 35, 0.12);
  --shadow-inset: inset 0 1px 2px rgba(60, 45, 35, 0.08);

  --paper-lined-bg: #fffdf9;
  --paper-lined-rule: #f0e6d8;

  --paper-lined-title: #1e1510;
  --paper-lined-body: #4a3b30;
  --paper-lined-label: #a6331b;
  --paper-lined-meta: #6f6259;
  --paper-lined-edge-hi: #ebe2d6;
  --paper-lined-edge-lo: #d9cebe;
  --paper-lined-dash: #e2d6c6;

  --paper-plum-bg: #f5edf4;
  --paper-plum-title: #1e1510;
  --paper-plum-body: #4a3b30;
  --paper-plum-label: #8a3360;
  --paper-plum-meta: #6f6259;
  --paper-plum-edge-hi: #e4d6e2;
  --paper-plum-edge-lo: #d0bed0;
  --paper-plum-dash: #dfcedf;

  --paper-ivory-bg: #ffffff;
  --paper-ivory-title: #0c0a09;
  --paper-ivory-body: #3b2e25;
  --paper-ivory-label: #9a3412;
  --paper-ivory-meta: #6f6259;
  --paper-ivory-edge-hi: #ede6dc;
  --paper-ivory-edge-lo: #d6cbbe;
  --paper-ivory-dash: #e6ddd0;

  --paper-clay-bg: #faeee6;
  --paper-clay-title: #1e1510;
  --paper-clay-body: #4a3b30;
  --paper-clay-label: #a6331b;
  --paper-clay-meta: #6f6259;
  --paper-clay-edge-hi: #ebded4;
  --paper-clay-edge-lo: #d6c5b8;
  --paper-clay-dash: #e4d4c8;

  --paper-honey-bg: #fef9db;
  --paper-honey-title: #1e1510;
  --paper-honey-body: #4a3b30;
  --paper-honey-label: #7a5405;
  --paper-honey-meta: #6f6259;
  --paper-honey-edge-hi: #ede6c8;
  --paper-honey-edge-lo: #ded1ad;
  --paper-honey-dash: #e2d5b0;

  --paper-draft-bg: #fffdfa;
  --paper-draft-title: #1e1510;
  --paper-draft-body: #4a3b30;
  --paper-draft-label: #9a3412;
  --paper-draft-dash: #c7b5a0;
  --paper-draft-btn-bg: #f4ebe0;
  --paper-draft-btn-fg: #8a330e;
  --paper-draft-btn-edge: #d6c5b5;

  --note-bg: #fef9db;
  --note-fg: #342e1a;
  --note-label: #7a5405;
  --note-edge: #ebdcb0;

  --contact-bg: #f8f1d8;
  --contact-title: #1e150d;
  --contact-body: #4a3c2a;
  --contact-label: #7a5405;
  --contact-rule: #dfd2ad;
  --contact-row-bg: #efe6c8;
  --contact-row-key: #44403c;
  --contact-row-val-1: #715000;
  --contact-row-val-2: #9a3412;
  --contact-edge: #ded1b1;

  --ticket-bg: #c2410c;
  --ticket-edge: #b43e0b;
  --ticket-fg: #ffffff;
  --ticket-fg-soft: #ffece7;
  --stamp-bg: #382433;
  --stamp-dash: #7a5071;
  --stamp-fg: #ffffff;
  --stamp-label: #ffb77d;
  --stamp-sub: #e5b9d5;
  --staple: #8b8076;
  --shadow-staple: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --ticket-perforation: rgba(255, 255, 255, 0.45);
  --scrim: rgba(40, 30, 20, 0.45);
  --clip: #7d746b;
  --clip-shadow: 1px 2px 1px rgba(60, 40, 20, 0.35);

  --tape-kraft: #e6a84f;
  --tape-sand: #d4a86a;
  --tape-rose: #9c506d;
  --tape-plum: #a85876;
  --tape-mauve: #8c5a75;
  --tape-amber: #d97706;
  --tape-brick: #b93c28;

  --page-current-bg: #c2410c;
  --page-current-fg: #ffffff;
  --page-current-edge: #c2410c;

  --envelope-bg: #f3ebdf;
  --input-bg: #fffdfa;
  --input-edge: #d6c7b6;
  --input-fg: #1f1610;
  --input-placeholder: #786a5f;

  --pillar-infra-bg: #fbeae5;
  --pillar-infra-fg: #8b2316;
  --pillar-infra-edge: #f2bdb0;
  --pillar-infra-dot: #c2410c;
  --pillar-agent-bg: #fce7f3;
  --pillar-agent-fg: #831843;
  --pillar-agent-edge: #f9a8d4;
  --pillar-agent-dot: #db2777;
  --pillar-growth-bg: #ffedd5;
  --pillar-growth-fg: #9a3412;
  --pillar-growth-edge: #fdba74;
  --pillar-growth-dot: #ea580c;
  --pillar-learn-bg: #fef9c3;
  --pillar-learn-fg: #854d0e;
  --pillar-learn-edge: #fde047;
  --pillar-learn-dot: #ca8a04;
}