/* ═══════════════════════════════════════════════════════════════════════
   NGÀNH HỌC TAROT — DESIGN TOKENS
   Mọi giá trị dưới đây được TRÍCH TỪ PIXEL của docs/ref/idea.jpeg
   (ảnh gốc 1487×1058, quy về khung thiết kế 1440px).
   Đọc kèm docs/design-system.md.

   Quy ước tên:
     --t-*   token nguyên thuỷ (primitive) — bảng màu thô, không dùng trực tiếp
     --c-*   màu ngữ nghĩa (semantic)
     --f-*   typography
     --s-*   spacing
     --r-*   bo góc
     --e-*   hiệu ứng (shadow, glow, blur)
     --z-*   z-index
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────────────────
     1. PRIMITIVE — MỰC ĐÊM (ink)
     Phát hiện quan trọng: nền mẫu TỐI HƠN NHIỀU so với cảm nhận bằng mắt.
     Trung vị nền hero chỉ #0A040F–#0F0619; thanh header gần như đen tuyền.
     ───────────────────────────────────────────────────────────────────── */
  --t-ink-950: #00010E;   /* thanh header — đo x300-480, y0-100 */
  --t-ink-900: #05030F;   /* mép ngoài hero */
  --t-ink-850: #0A040F;   /* nền hero trên-trái (trung vị) */
  --t-ink-800: #0F0619;   /* nền hero giữa-trái (trung vị) */
  --t-ink-700: #0E091F;   /* nền phía trên lá bài */

  /* ─────────────────────────────────────────────────────────────────────
     2. PRIMITIVE — TÍM (violet)
     Ánh tím chỉ xuất hiện cục bộ quanh lá bài và sau nhân vật,
     KHÔNG phủ toàn trang.
     ───────────────────────────────────────────────────────────────────── */
  --t-violet-900: #130B30;  /* quầng sáng quanh lá bài */
  --t-violet-800: #150C29;  /* nền sau nhân vật */
  --t-violet-700: #211132;  /* điểm tím sáng nhất của nền */
  --t-violet-600: #2E162D;  /* mặt bàn (ngả mận) */
  --t-violet-500: #3A1C31;  /* mặt bàn vùng sáng */
  --t-violet-400: #533757;  /* viền quầng sáng */

  /* Ruột lá bài — chàm sâu hơn hẳn nền trang */
  --t-card-core: #060331;   /* lõi giữa lá bài */
  --t-card-edge: #200938;   /* rìa trong lá bài, nơi ánh sáng lọt vào */
  --t-card-halo: #7A4C7F;   /* quầng tím ngay sát viền ngoài */

  /* ─────────────────────────────────────────────────────────────────────
     3. PRIMITIVE — VÀNG NẾN (gold)
     Vàng trong mẫu là VÀNG SÂM PANH ẤM, không phải vàng chanh.
     Lấy từ các pixel có R−B > 55 và R > 150.
     ───────────────────────────────────────────────────────────────────── */
  --t-gold-050: #FFECC6;   /* điểm sáng nhất: lửa nến, đầu tia mặt trời */
  --t-gold-100: #F2E3D2;   /* gạch chân nav (gần trắng kem) */
  --t-gold-200: #F2CD95;   /* đỉnh nút CTA */
  --t-gold-300: #F4BF7A;   /* thân nút CTA */
  --t-gold-400: #F0BF84;   /* đáy nút CTA (vát sáng ngược) */
  --t-gold-500: #D0B182;   /* nét vàng logo (trung vị) */
  --t-gold-600: #CC9A80;   /* viền lá bài, hoạ tiết mặt bàn */
  --t-gold-700: #B37B57;   /* chi tiết vàng ở xa / mờ */

  /* ─────────────────────────────────────────────────────────────────────
     4. PRIMITIVE — CHỮ & NHẤN
     ───────────────────────────────────────────────────────────────────── */
  --t-white:       #FDFCFE;  /* headline */
  --t-cream:       #E0D2C0;  /* chữ logo */
  --t-nav:         #D7D7E4;  /* nav ở trạng thái thường (ngả xanh lạnh) */
  --t-nav-active:  #E4DED5;  /* nav đang chọn (ấm hơn một chút) */
  --t-body:        #E7DDE7;  /* chữ phụ đề */

  /* Dải nhấn của "overthink hả?" — đo dọc theo nét chữ, phải sang trái */
  --t-accent-lilac: #EFCAF5;  /* x≈100–200 */
  --t-accent-mauve: #F3D4F9;  /* x≈250 */
  --t-accent-rose:  #F0CFD7;  /* x≈400 */
  --t-accent-blush: #ECCBC7;  /* x≈450–500 */

  --t-on-gold: #260612;   /* chữ trên nút vàng — mận gần đen, KHÔNG phải nâu */

  /* ─────────────────────────────────────────────────────────────────────
     5. SEMANTIC — BỀ MẶT
     ───────────────────────────────────────────────────────────────────── */
  --c-bg:            var(--t-ink-800);
  --c-bg-deep:       var(--t-ink-900);
  --c-header:        var(--t-ink-950);
  --c-surface:       #140A24;   /* thẻ/panel nổi trên nền */
  --c-surface-raise: #1C0F30;   /* thẻ được nhấn mạnh */
  --c-card:          var(--t-card-core);
  --c-table:         var(--t-violet-600);

  /* Bề mặt trong mờ — dùng khi phần tử nổi trên khung cảnh cố định của hero.
     Có alpha để cảnh phía sau vẫn hiện lên, kèm backdrop-filter cho khỏi rối. */
  --c-veil:          rgba(20, 10, 36, .60);
  --c-veil-raise:    rgba(30, 16, 50, .66);
  --c-veil-strong:   rgba(13, 6, 24, .78);

  /* Nền hero: tối ở rìa, chỉ ấm lên quanh tâm-phải nơi có nhân vật */
  --c-hero-bg:
    radial-gradient(58% 46% at 62% 34%, var(--t-violet-700) 0%,
                                        var(--t-violet-900) 38%,
                                        var(--t-ink-850) 72%,
                                        var(--t-ink-900) 100%),
    linear-gradient(180deg, var(--t-ink-950) 0%, var(--t-ink-800) 100%);

  /* ─────────────────────────────────────────────────────────────────────
     6. SEMANTIC — CHỮ
     ───────────────────────────────────────────────────────────────────── */
  --c-text:        var(--t-white);
  --c-text-body:   var(--t-body);
  --c-text-soft:   #BCB0C9;
  --c-text-mute:   #8B7F9C;
  --c-text-gold:   var(--t-gold-500);
  --c-text-cream:  var(--t-cream);
  --c-nav:         var(--t-nav);
  --c-nav-active:  var(--c-gold);
  --c-on-gold:     var(--t-on-gold);

  /* Dải nhấn dùng cho background-clip: text */
  --c-accent-gradient: linear-gradient(96deg,
      var(--t-accent-lilac) 0%,
      var(--t-accent-mauve) 26%,
      var(--t-accent-rose)  62%,
      var(--t-accent-blush) 100%);

  /* ─────────────────────────────────────────────────────────────────────
     7. SEMANTIC — VÀNG & ĐƯỜNG NÉT
     ───────────────────────────────────────────────────────────────────── */
  --c-gold:        var(--t-gold-500);
  --c-gold-bright: var(--t-gold-050);
  --c-gold-line:   var(--t-gold-600);

  /* Nút CTA: sáng ở đỉnh → đậm ở giữa-dưới → hơi sáng lại ở đáy (vát) */
  --c-cta-gradient: linear-gradient(180deg,
      var(--t-gold-200) 0%,
      var(--t-gold-300) 52%,
      var(--t-gold-300) 78%,
      var(--t-gold-400) 100%);

  /* Viền: trong mẫu KHÔNG có pixel vàng bão hoà ở viền nút phụ và gạch nav —
     chúng là vàng đã giảm alpha trên nền đen. */
  --c-line:        rgba(208, 177, 130, .34);   /* viền nút phụ, khung thẻ */
  --c-line-soft:   rgba(208, 177, 130, .16);   /* đường chia mảnh */
  --c-line-bright: rgba(242, 227, 210, .85);   /* gạch chân nav đang chọn */
  --c-line-violet: rgba(122, 76, 127, .30);    /* đường viền ngả tím */

  /* ─────────────────────────────────────────────────────────────────────
     8. TYPOGRAPHY
     Mẫu dùng SERIF CHO TOÀN BỘ chữ — kể cả nav, nút và phụ đề.
     Không có một chữ sans nào trong ảnh.
     ───────────────────────────────────────────────────────────────────── */
  --f-display: 'Playfair Display', 'Times New Roman', serif;  /* headline, logo, lá bài */
  --f-text:    'Cormorant Garamond', Georgia, serif;          /* nav, phụ đề, nút, body */
  --f-ui:      'Be Vietnam Pro', system-ui, sans-serif;       /* CHỈ cho chữ ≤14px: nhãn form, chú thích */

  /* Cỡ chữ — đo trên ảnh rồi quy về khung 1440px */
  --f-hero:      clamp(2.75rem, 5.4vw, 4.75rem);  /* 76px @1440 — đo 80px @1487 */
  --f-h2:        clamp(1.85rem, 3.2vw, 2.75rem);  /* 44px — suy ra, mẫu không có */
  --f-h3:        1.875rem;   /* 30px — cỡ chữ "Tarot" trên lá bài */
  --f-logo:      2.625rem;   /* 42px — chữ "Tarot" ở logo (cao chữ hoa đo 30px) */
  --f-lead:      1.5rem;     /* 24px — phụ đề "Ngồi xuống đây…" (đo 26px) */
  --f-btn:       1.625rem;   /* 26px — nhãn nút CTA (đo 28px) */
  --f-nav:       1.25rem;    /* 20px — mục nav (đo 21px) */
  --f-body:      1.0625rem;  /* 17px — văn bản dài */
  --f-eyebrow:   0.9375rem;  /* 15px — "Ngành Học" trên logo, nhãn mắt */
  --f-caption:   0.8125rem;  /* 13px — chú thích (dùng --f-ui) */

  --f-lh-hero:  1.12;   /* đo: bước dòng 93px / cỡ chữ 80px */
  --f-lh-tight: 1.2;
  --f-lh-base:  1.6;
  --f-lh-loose: 1.75;

  --f-w-light:  300;
  --f-w-reg:    400;
  --f-w-med:    500;
  --f-w-semi:   600;   /* trọng lượng của headline trong mẫu */
  --f-w-bold:   700;

  --f-ls-hero:   -0.005em;
  --f-ls-base:    0;
  --f-ls-nav:     0.01em;
  --f-ls-eyebrow: 0.16em;   /* "Ngành Học" giãn chữ rõ rệt */
  --f-ls-label:   0.14em;

  /* ─────────────────────────────────────────────────────────────────────
     9. SPACING — thang 4px
     ───────────────────────────────────────────────────────────────────── */
  --s-1:  0.25rem;   /* 4  */
  --s-2:  0.5rem;    /* 8  */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  2.5rem;    /* 40 */
  --s-8:  3rem;      /* 48 */
  --s-9:  4rem;      /* 64 */
  --s-10: 4.5rem;    /* 72 — khoảng hở giữa các mục nav (đo 63–85px) */
  --s-11: 6rem;      /* 96 */
  --s-12: 8rem;      /* 128 */

  --s-header-h:  6.25rem;   /* 100px — chiều cao thanh header (đo 104px) */
  --s-gutter:    2rem;      /* 32px */
  --s-gutter-lg: 2.5rem;    /* 40px — lề của header, đo từ logo x=40 */
  --s-shell:     82.5rem;   /* 1320px — bề rộng vùng nội dung */

  /* ─────────────────────────────────────────────────────────────────────
     10. BO GÓC
     ───────────────────────────────────────────────────────────────────── */
  --r-card:  0.5rem;    /* 8px — lá bài tarot, bo rất nhẹ */
  --r-sm:    0.875rem;  /* 14px */
  --r-md:    1.375rem;  /* 22px — thẻ nội dung */
  --r-pill:  999px;     /* nút CTA & nút phụ đều là pill tuyệt đối */

  /* ─────────────────────────────────────────────────────────────────────
     11. HIỆU ỨNG
     Ánh sáng trong mẫu luôn là VÀNG ẤM hoặc TÍM, không bao giờ trắng lạnh.
     ───────────────────────────────────────────────────────────────────── */
  --e-glow-gold:  0 0 60px -14px rgba(242, 205, 149, .75);
  --e-glow-cta:   0 0 0 1px rgba(255, 236, 198, .5) inset,
                  0 18px 46px -18px rgba(242, 205, 149, .8),
                  0 0 70px -20px rgba(255, 236, 198, .65);
  --e-glow-card:  0 0 90px -14px rgba(122, 76, 127, .85),
                  0 34px 90px -30px #000;
  --e-glow-text:  0 0 34px rgba(122, 76, 127, .55), 0 6px 24px rgba(0, 0, 0, .65);
  --e-shadow-sm:  0 10px 26px -14px #000;
  --e-shadow-md:  0 28px 60px -34px #000;

  /* Đổ bóng "nghỉ" — mỏng, chỉ đủ tách phần tử khỏi khung cảnh phía sau.
     Ba tầng: viền tiếp giáp sắc nét, bóng gần, bóng xa. */
  --e-lift-sm:  0 1px 2px rgba(0, 0, 0, .55),
                0 4px 10px -4px rgba(0, 0, 0, .6);
  --e-lift:     0 1px 2px rgba(0, 0, 0, .6),
                0 6px 16px -8px rgba(0, 0, 0, .7),
                0 18px 40px -24px rgba(0, 0, 0, .85);
  --e-lift-lg:  0 1px 3px rgba(0, 0, 0, .6),
                0 10px 26px -10px rgba(0, 0, 0, .75),
                0 30px 64px -30px rgba(0, 0, 0, .9);

  --e-ease:      cubic-bezier(.22, .8, .3, 1);
  --e-dur-fast:  .25s;
  --e-dur-base:  .4s;
  --e-dur-slow:  .8s;

  /* ─────────────────────────────────────────────────────────────────────
     12. Z-INDEX
     ───────────────────────────────────────────────────────────────────── */
  --z-bg:      0;
  --z-scene:   1;   /* mặt bàn, hoạ tiết nền */
  --z-figure:  2;   /* nhân vật */
  --z-content: 3;   /* chữ, lá bài, nút */
  --z-header:  100;
}