/* 🎯 Biến toàn cục t2tDigital – Dùng cho toàn site */
:root {
  /* ===============================
  🎨 MÀU THƯƠNG HIỆU
  =============================== */
  --t2t-color-brand-primary:   #00ffd5; /* xanh ngọc neon */
  --t2t-color-brand-secondary: #00b7ff; /* xanh dương tươi */
  --t2t-color-border-accent:   #00f7ff; /* dùng riêng cho viền nổi quote */

  /* ===============================
  💬 MÀU CHỮ & CẢM XÚC
  =============================== */
  --t2t-text-light:       #ffffff;
  --t2t-text-soft:        #f2f2f2;
  --t2t-text-dark:        #1a1a1a;
  --t2t-text-muted:       #888888;
  --t2t-text-muted-light: #cccccc;     /* dùng cho summary nhẹ */
  --t2t-text-handwriting: #f4eacb;     /* dùng cho handwriting & caption ảnh */
  --t2t-text-highlight:   #f0f8ff;     /* dùng cho highlight box cảm xúc */
  --t2t-text-quote:       #e0f9ff;     /* dùng trong quote chuẩn */
  --t2t-text-glow:        rgba(0, 255, 213, 0.5);
  --t2t-emotion-soft:     #eae3cf;     /* tone cảm xúc – thơ, quote nhẹ */

  /* ===============================
  🌙 NỀN & NỀN MỜ
  =============================== */
  --t2t-bg-dark:         #0a0a0a; /* nền đen chủ đạo */
  --t2t-bg-deep:         #101010; /* vùng bài viết */
  --t2t-bg-soft:         #1a1a1a; /* vùng block nhẹ hơn */
  --t2t-bg-glass-dark:   rgba(0, 0, 0, 0.4);
  --t2t-bg-glass-light:  rgba(255, 255, 255, 0.6);

  /* ===============================
  🔠 FONT FAMILY & FONT WEIGHT
  =============================== */
  --t2t-font-serif: "Georgia", "Noto Serif", "Times New Roman", ui-serif, serif;
  --t2t-font-sans:  "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  --t2t-font-code:  "Fira Code", monospace;

  --t2t-font-regular:   400;
  --t2t-font-medium:    500;   /* dùng cho quote nhẹ, highlight */
  --t2t-font-semibold:  600;   /* dùng cho subheading, CTA */
  --t2t-font-bold:      700;
  --t2t-font-heavy:     800;

  /* ===============================
  📐 FONT SIZE & LINE HEIGHT
  =============================== */
  --t2t-font-small:  0.85rem;
  --t2t-font-normal: 0.95rem;
  --t2t-font-base:   1rem;
  --t2t-font-large:  1.1rem;

  --t2t-lineheight-base:  1.6; /* chuẩn chung */
  --t2t-lineheight-quote: 1.7;
  --t2t-lineheight-hero:  1.9;
  --t2t-lineheight-tight: 1.3;
  --t2t-lineheight-loose: 1.8;

  /* ===============================
  📦 PADDING – CHO BLOCK & COMPONENT
  =============================== */
  --t2t-padding-xs:    4px;       /* dùng cho subheading, intro nhỏ */
  --t2t-padding-sm:    8px;
  --t2t-padding-md:   12px;
  --t2t-padding-lg:   1.5rem;
  --t2t-padding-xl:   2rem;

  --t2t-padding-blog-desktop: 1.5rem;
  --t2t-padding-blog-tablet:  1rem;
  --t2t-padding-blog-mobile:  0.25rem; /* giảm cho gọn gàng mobile */

  /* ===============================
  📏 MARGIN / SPACING GIỮA CÁC PHẦN
  =============================== */
  --t2t-spacing-sm:   8px;
  --t2t-spacing-md:  12px;
  --t2t-spacing-lg:  1.5rem;
  --t2t-spacing-xl:  2rem;

  /* ===============================
  📏 MAX-WIDTH CHO BLOCK
  =============================== */
  --t2t-maxwidth-blog:  800px;
  --t2t-maxwidth-intro: 720px;

  /* ===============================
  🧊 BORDER RADIUS & SHADOW
  =============================== */
  --t2t-radius-small:  8px;
  --t2t-radius-medium: 12px;
  --t2t-radius-large:  16px;

  --t2t-shadow-cta: 0 6px 16px rgba(0, 255, 213, 0.25);

  /* ===============================
  💻 CODE BLOCK STYLING
  =============================== */
  --t2t-code-text: #ffd479;
  --t2t-code-bg:   rgba(255, 255, 255, 0.08);

  /* ===============================
  ⏱️ TRANSITION
  =============================== */
  --t2t-transition: all 0.3s ease;
} /* END ROOT – Biến toàn cục */