/* =============================================================
   t2tDigital — Global Design Tokens · v2.2 (2026-01-16)

   SSOT NOTE
   - File này là “nguồn sự thật duy nhất” cho mọi biến :root.
   - Mục tiêu: gom :root rải rác (legacy-classic.css / home-addons.css / MiniTOC / Manifesto)
     về 1 chỗ, nhưng KHÔNG làm vỡ layout hiện tại.

   Quy tắc tương thích ngược
   - Giữ tên cũ (legacy) như alias trỏ về token mới.
   - Nếu tên cũ đang được dùng thực tế (markup/CSS cũ) → giữ giá trị y hệt frontend.

   Load order khuyến nghị
   1) t2t-tokens.css
   2) legacy-classic.css
   3) home-addons.css (home scope)
   4) page-specific (vd: t2t-stt-night.css)
   ============================================================= */

:root {
  /* ===============================
     BRAND
  ================================ */
  --t2t-color-brand-primary: #00ffd5; /* Cyan – brand chính */
  --t2t-color-brand-secondary: #00b7ff; /* Blue – brand phụ */
  --t2t-color-border-accent: #00f7ff; /* Nhấn viền/hover */

  /* Alias tiện dụng (đã dùng rộng trong code) */
  --t2t-brand-primary: var(--t2t-color-brand-primary);
  --t2t-brand-secondary: var(--t2t-color-brand-secondary);
  --t2t-border-accent: var(--t2t-color-border-accent);

  /* Stripe mặc định cho quote (modifier có thể override) */
  --t2t-quote-stripe: var(--t2t-brand-primary);

  /* ===============================
     LEGACY BRAND ALIASES (đang tồn tại trong legacy)
     - Giữ để không phải chase-replace ngay lập tức.
  ================================ */
  --t2t-brand-mint: var(--t2t-brand-primary);
  --t2t-brand-sky: var(--t2t-brand-secondary);

  /* ===============================
     TEXT & EMOTION PALETTE
  ================================ */
  /*
    IMPORTANT COMPAT:
    - Trong legacy đang có :root { --t2t-text-light: #e6e6e6; }
      → frontend hiện tại đang “thắng” màu này.
    - Vì vậy token sẽ nhận đúng #e6e6e6 để khi xoá legacy-root không đổi layout.
  */
  --t2t-text-light: #e6e6e6; /* (compat) */
  --t2t-text-light-pure: #ffffff; /* dự phòng nếu cần trắng tuyệt đối */

  --t2t-text-soft: #f2f2f2; /* body trên nền tối */
  --t2t-text-dark: #1a1a1a; /* body trên nền sáng */
  --t2t-text-muted: #888888;
  --t2t-text-muted-light: #cccccc; /* kicker/ghi chú sáng */
  --t2t-text-highlight: #f0f8ff; /* chữ nhấn nổi */
  --t2t-text-quote: #e0f9ff; /* nội dung trong .t2t-quote */

  /* Tone cảm xúc */
  --t2t-emotion-soft: #eae3cf;
  --t2t-text-handwriting: #f4eacb; /* “kem bơ” */
  --t2t-color-caption: #f4eacb; /* dùng cho .t2t-image-caption */

  --t2t-text-glow: rgba(0, 255, 213, 0.5); /* shadow nhòe cho CTA/link */
  --t2t-opacity-text-muted: 0.75;
  --t2t-opacity-text-soft: 0.85;
  --t2t-opacity-text-full: 1;

  /* ===============================
     HOME-ADDONS COMPAT TOKENS
     - Trước đây home-addons.css có :root fallback.
     - Đưa lên token để có thể xoá :root ở home-addons mà không đổi giao diện.
  ================================ */
  --t2t-text: #e8eaed;
  --t2t-text-dim: #9aa0a6;
  --t2t-card-bg: rgba(255, 255, 255, 0.04);
  --t2t-card-bd: rgba(255, 255, 255, 0.1);
  --t2t-radius: 14px; /* legacy naming (home-addons) */

  /* ===============================
     BUTTER (Footer mini-manifesto) — legacy compat
     - legacy đang dùng: --t2t-color-butter / --t2t-color-butter-strong
  ================================ */
  --t2t-color-butter: #f6e7c8;
  --t2t-color-butter-strong: #ffe7c3;

  /* ===============================
     MANIFESTO (legacy :root block)
     - Trước đây biến này nằm trong legacy với comment “scope riêng”,
       nhưng thực tế nó là :root → global.
     - Đưa vào token để xoá khối :root đó khỏi legacy mà không vỡ layout.
  ================================ */
  --t2t-paper: #eae3cf;
  --t2t-ink: #0b0f10;
  --t2t-soft: #f4eacb; /* giữ đúng giá trị legacy (đừng alias sang text-soft) */
  --t2t-soft-2: #b7b0a3;

  /* ===============================
     BACKGROUND
  ================================ */
  --t2t-bg-dark: #0a0a0a;
  --t2t-bg-deep: #101010; /* hero/section nền sâu */
  --t2t-bg-soft: #1a1a1a; /* panel trung tính */
  --t2t-bg-glass-dark: rgba(0, 0, 0, 0.25);
  --t2t-bg-glass-light: rgba(255, 255, 255, 0.6);

  /* =========================================
     Mood Frame – t2t-mf (Emotion Panel)
     Dùng cho: Manifesto, STT Đêm Khuya, Founder
  ========================================= */
  /* Nền – sâu nhưng không “hét” */
  --t2t-mf-bg-start: #060b10; /* xanh đen rất sâu */
  --t2t-mf-bg-mid: #0b1218; /* vùng đọc chính */
  --t2t-mf-bg-end: #05080b; /* lắng xuống */

  --t2t-mf-bg-gradient: linear-gradient(
    180deg,
    var(--t2t-mf-bg-start) 0%,
    var(--t2t-mf-bg-mid) 45%,
    var(--t2t-mf-bg-end) 100%
  );

  /* Viền & tách lớp – rất mềm */
  --t2t-mf-border-color: rgba(180, 200, 210, 0.06);

  /* Inner shadow: tạo cảm giác “ôm chữ” */
  --t2t-mf-shadow-inner: inset 0 0 0 1px var(--t2t-mf-border-color);

  /* Outer shadow: tách panel khỏi nền global */
  --t2t-mf-shadow-outer: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* Padding & bo góc – ưu tiên đọc */
  --t2t-mf-radius: 18px;
  --t2t-mf-padding: clamp(18px, 3vw, 28px);
  --t2t-mf-max-width: clamp(720px, 66vw, 1280px);

  /* ===============================
     BORDER & SHADOW
  ================================ */
  --t2t-border-soft: rgba(255, 255, 255, 0.08);
  --t2t-border-strong: rgba(0, 247, 255, 0.25);
  --t2t-shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.25);
  --t2t-shadow-subtle: 0 4px 18px rgba(0, 0, 0, 0.14); /* dùng cho soft panel */
  --t2t-shadow-cta: 0 6px 16px rgba(0, 255, 213, 0.25);
  --t2t-brand-glow-primary: 0 0 20px rgba(0, 255, 213, 0.35);
  --t2t-brand-glow-secondary: 0 0 20px rgba(0, 183, 255, 0.35);

  /* ===============================
     TYPOGRAPHY (stack/weight/size/line-height)
  ================================ */
  /* Stacks */
  --t2t-font-sans: ui-sans-serif, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    'Noto Sans', 'Helvetica Neue', 'Segoe UI Variable', sans-serif;
  --t2t-font-serif: 'Merriweather', 'Noto Serif', Georgia, 'Times New Roman', serif; /* quote */
  --t2t-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  --t2t-font-emotion: 'Cormorant Infant', 'Merriweather', 'Noto Serif', serif; /* thơ */

  /* Font base toàn site */
  --t2t-font-base-stack: 'Montserrat', sans-serif;

  /* Inline note / code */
  --t2t-font-inline: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas,
    'Liberation Mono', 'DejaVu Sans Mono', 'Noto Sans Mono', 'Courier New', monospace;
  --t2t-font-code: var(--t2t-font-inline);
  /* ===============================
   META / INLINE NOTE (Reading rhythm)
  =============================== */

  /* Meta text: lời dẫn, lời mời – phải đọc thoải mái */
  --t2t-font-meta: clamp(14.5px, 1.15vw, 16.5px);

  /* Inline note: thì thầm, nhưng không được "híu" */
  --t2t-font-inline-note: clamp(13.5px, 1.05vw, 15px);

  /* Weights */
  --t2t-font-regular: 400;
  --t2t-font-medium: 500;
  --t2t-font-semibold: 600;
  --t2t-font-bold: 700;
  --t2t-font-heavy: 800;

  /* Sizes */
  --t2t-font-xs: 12px;
  --t2t-font-sm: 14px;
  --t2t-font-base: 16px;
  --t2t-font-md: 18px;
  --t2t-font-lg: 20px;
  --t2t-font-xl: 24px;
  --t2t-font-2xl: 28px;
  --t2t-font-3xl: 34px;
  --t2t-font-fluid-base: clamp(16px, 3.5vw, 22px);
  --t2t-font-caption: 17px;

  /* Legacy size tokens (giữ tương thích) */
  --t2t-font-small: 0.85rem;
  --t2t-font-normal: 0.95rem;
  --t2t-font-large: 1.1rem;

  /* Line-height */
  --t2t-lineheight-base: 1.6;
  --t2t-lineheight-quote: 1.7;
  --t2t-lineheight-hero: 1.9;
  --t2t-lineheight-tight: 1.3;
  --t2t-lineheight-loose: 1.8;

  /* Underline height cho H1/H2 */
  --t2t-underline-h: 3px;

  /* ===============================
     SPACING / PADDING / WIDTH
  ================================ */
  /* Spacing scale */
  --t2t-spacing-2xs: 2px;
  --t2t-spacing-xs: 4px;
  --t2t-spacing-sm: 8px;
  --t2t-spacing-md: 12px;
  --t2t-spacing-lg: 1.5rem;
  --t2t-spacing-xl: 2rem;
  --t2t-spacing-2xl: 3rem;

  /* Inline note */
  --t2t-spacing-inline-note: 0.75rem;

  /* Padding tokens */
  --t2t-padding-xs: 4px;
  --t2t-padding-sm: 8px;
  --t2t-padding-md: 12px;
  --t2t-padding-lg: 1.5rem;
  --t2t-padding-xl: 2rem;

  /* Blog layout paddings */
  --t2t-padding-blog-desktop: 2rem;
  --t2t-padding-blog-tablet: 1.5rem;
  --t2t-padding-blog-mobile: 0.25rem;

  /* Compatibility aliases (giữ CSS cũ chạy) */
  --t2t-blog-padding-desktop: var(--t2t-padding-blog-desktop);
  --t2t-blog-padding-tablet: var(--t2t-padding-blog-tablet);
  --t2t-blog-padding-mobile: var(--t2t-padding-blog-mobile);

  /* Width */
  --t2t-maxwidth-intro: 720px;
  --t2t-maxwidth-text: 780px;
  --t2t-maxwidth-wide: 1100px;
  --t2t-maxwidth-blog: 880px; /* legacy cũng có — giữ đúng */

  /* ===============================
     MiniTOC TOKENS (SSOT)
     - legacy đang có :root { --toc-width --toc-gap --toc-top }
     - Đưa vào token + tạo alias để không vỡ layout.
  ================================ */
  --t2t-toc-width: 264px;
  --t2t-toc-gap-side: 20px;
  --t2t-toc-top: 96px;

  /* Legacy names (alias) */
  --toc-width: var(--t2t-toc-width);
  --toc-gap: var(--t2t-toc-gap-side);
  --toc-top: var(--t2t-toc-top);

  /* MiniTOC misc */
  --t2t-toc-gutter-x: 16px; /* pill/panel/backtop gutter */
  --t2t-toc-safe-gap: 20px; /* đệm giữa panel & BackToTop trên mobile */
  --t2t-toc-gap: 8px; /* khoảng cách pill ↔ danh sách */
  --t2t-backtop-height: 40px; /* chiều cao BackToTop (fallback) */

  /* ===============================
     RADII
  ================================ */
  --t2t-radius-sm: 6px;
  --t2t-radius-md: 10px;
  --t2t-radius-lg: 14px;
  --t2t-radius-xl: 20px;

  /* Legacy radius (alias) */
  --t2t-radius-small: var(--t2t-radius-sm);
  --t2t-radius-medium: var(--t2t-radius-md);
  --t2t-radius-large: var(--t2t-radius-lg);

  /* ===============================
     BLOG WRAPPER LAYOUT
  ================================ */
  --t2t-blog-radius-desktop: 16px;
  --t2t-blog-radius-tablet: 12px;
  --t2t-blog-radius-mobile: 8px;
  --t2t-blog-margin-vertical: 3rem;
  --t2t-blog-margin-tablet: 2rem;
  --t2t-blog-margin-mobile: 1.5rem;

  /* ===============================
     CODE
  ================================ */
  --t2t-code-text: #ffd479; /* inline code màu mật ong */
  --t2t-code-bg: rgba(255, 255, 255, 0.08); /* nền mờ nhẹ cho inline code */

  /* ===============================
     MOTION
  ================================ */
  --t2t-transition: all 0.3s ease;

  /* ===============================
     MISC
  ================================ */
  --t2t-indent-step: 1.25rem; /* cho .t2t-indent-* */
  --t2t-anchor-offset: 84px; /* offset khi có header sticky */
  --memo-icon: '🔗'; /* icon mặc định cho .t2t-memo-links */

  /* ===============================
     FOUNDER HERO (Overlay Copy Rhythm)
  ================================ */
  --t2t-founder-gap: clamp(12px, 1.8vw, 20px);
  --t2t-founder-preline-size: clamp(18px, 1.65vw, 23px);

  /* ===============================
   GRID · Card/Section layout tokens (NEUTRAL)
   - Dùng cho mọi “card grid”/section grid về sau
   - Home chỉ là nơi dùng đầu tiên
   ================================ */
  --t2t-card-grid-gap: 20px;

  /* “rail” max-width cho grid card (3 → 2 → 1 cột) */
  --t2t-card-grid-max: 1180px;
  --t2t-card-grid-max-tablet: 760px;
  --t2t-card-grid-max-mobile: 420px;
}

/* ===============================
   MEDIA-QUERY ROOT PATCHES (tuỳ chọn)
   - Chỉ nên dùng cho token thật sự phụ thuộc viewport.
================================ */
@media (max-width: 767px) {
  :root {
    --t2t-underline-h: 3px;
  }
}

/* ===== End of tokens v2.2 ===== */