/* ============================================================
   TOKENS.CSS — Nguồn sự thật duy nhất cho mọi giá trị design
   Ecolux Lighting B2B — v1.0
   Ref: design-tokens.md
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     1. COLOR — Primitive Palette
     ────────────────────────────────────────── */

  /* Primary: Ánh sáng Amber */
  --color-amber-50:   #FFFBEB;
  --color-amber-100:  #FEF3C7;
  --color-amber-300:  #FCD34D;
  --color-amber-400:  #FBBF24;
  --color-amber-500:  #F59E0B;
  --color-amber-600:  #D97706;
  --color-amber-700:  #B45309;

  /* Eco Green */
  --color-green-50:   #F0FDF4;
  --color-green-100:  #DCFCE7;
  --color-green-600:  #16A34A;
  --color-green-700:  #15803D;
  --color-green-800:  #166534;

  /* Neutral Scale */
  --color-white:      #FFFFFF;
  --color-gray-50:    #F9FAFB;
  --color-gray-100:   #F3F4F6;
  --color-gray-200:   #E5E7EB;
  --color-gray-300:   #D1D5DB;
  --color-gray-400:   #9CA3AF;
  --color-gray-500:   #6B7280;
  --color-gray-600:   #4B5563;
  --color-gray-700:   #374151;
  --color-gray-800:   #1F2937;
  --color-gray-900:   #111827;

  /* Info Blue — dùng cho badge IP65 */
  --color-blue-50:    #EFF6FF;
  --color-blue-700:   #1D4ED8;

  /* ──────────────────────────────────────────
     2. COLOR — Semantic Aliases
     ────────────────────────────────────────── */

  /* CTA & Interactive */
  --color-primary:         var(--color-amber-500);
  --color-primary-hover:   var(--color-amber-600);
  --color-primary-active:  var(--color-amber-700);
  --color-primary-subtle:  var(--color-amber-100);
  --color-primary-on:      var(--color-gray-900);

  --color-accent:          var(--color-green-600);
  --color-accent-hover:    var(--color-green-700);
  --color-accent-subtle:   var(--color-green-50);
  --color-accent-on:       var(--color-white);

  /* Surface & Background */
  --color-bg:              var(--color-white);
  --color-bg-subtle:       var(--color-gray-50);
  --color-bg-muted:        var(--color-gray-100);
  --color-bg-inverse:      var(--color-gray-900);
  --color-surface:         var(--color-white);

  /* Text */
  --color-text:            var(--color-gray-800);
  --color-text-muted:      var(--color-gray-600);
  --color-text-subtle:     var(--color-gray-500);
  --color-text-disabled:   var(--color-gray-400);
  --color-text-inverse:    var(--color-white);
  --color-text-heading:    var(--color-gray-900);

  /* Border */
  --color-border:          var(--color-gray-300);
  --color-border-subtle:   var(--color-gray-200);
  --color-border-strong:   var(--color-gray-500);
  --color-border-focus:    var(--color-amber-500);

  /* Footer (dark surface) */
  --color-footer-bg:       var(--color-gray-900);
  --color-footer-text:     var(--color-gray-300);
  --color-footer-muted:    var(--color-gray-500);
  --color-footer-border:   #2D3748;
  --color-footer-heading:  var(--color-white);
  --color-footer-link:     var(--color-gray-300);
  --color-footer-link-hover: var(--color-amber-400);

  /* ──────────────────────────────────────────
     3. TYPOGRAPHY
     ────────────────────────────────────────── */

  /* Font Family */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Type Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;

  /* Font Weight */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Line Height */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-widest:   0.1em;

  /* ──────────────────────────────────────────
     4. SPACING
     ────────────────────────────────────────── */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Semantic shortcuts */
  --section-py-sm:         var(--space-12);
  --section-py-md:         var(--space-16);
  --section-py-lg:         var(--space-24);
  --container-px-mobile:   var(--space-4);
  --container-px-tablet:   var(--space-8);
  --container-px-desktop:  var(--space-12);
  --card-padding:          var(--space-6);
  --button-px:             var(--space-6);
  --button-py:             var(--space-3);
  --nav-height:            4rem;

  /* ──────────────────────────────────────────
     5. BORDER RADIUS
     ────────────────────────────────────────── */

  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ──────────────────────────────────────────
     6. SHADOWS
     ────────────────────────────────────────── */

  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03);

  --shadow-amber:      0 4px 14px rgba(245,158,11,0.35);
  --shadow-amber-lg:   0 8px 24px rgba(245,158,11,0.45);
  --shadow-card:       0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 12px 28px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-nav:        0 2px 16px rgba(0,0,0,0.08);

  /* ──────────────────────────────────────────
     7. Z-INDEX & TRANSITIONS
     ────────────────────────────────────────── */

  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ──────────────────────────────────────────
     8. CONTAINER
     ────────────────────────────────────────── */

  --container-max: 1200px;
}


/* ============================================================
   SEMANTIC ALIAS — Danger/Error (bổ sung sau go-live, KHÔNG có trong bản
   gốc v1.0 ở trên — trước đây `.contact-form__required/__error/is-error`
   hardcode thẳng `#DC2626`/`#FEF2F2` ngoài hệ token, khiến dark mode không
   thể tự động đè lại — QA dark-mode round 1 phát hiện, xem
   qa/qa-report-darkmode.md CRITICAL-001/HIGH-002). Giá trị SÁNG giữ nguyên
   y hệt hex cũ (#DC2626/#FEF2F2) — không đổi giao diện sáng đã duyệt, chỉ
   đưa vào biến để dark mode có chỗ đè lại. Định nghĩa ở khối :root riêng
   này (không sửa khối gốc dòng 7–217) để giữ nguyên bằng chứng "light mode
   unchanged" mà QA đã verify. ============================================================ */

:root {
  --color-danger:         #DC2626; /* red-600 — giữ nguyên giá trị cũ dùng cho text lỗi/border invalid */
  --color-danger-subtle:  #FEF2F2; /* red-50 — nền ô input lỗi (is-error) */
}


/* ============================================================
   DARK MODE — Semantic Alias Override
   Ref: _workspace/01_design/dark-theme-spec.md (§0, §2, §3) — spec ĐÃ DUYỆT
   ------------------------------------------------------------
   Mặc định site LUÔN Ở CHẾ ĐỘ SÁNG (khối :root phía trên, không đổi). Khối
   dưới đây CHỈ áp dụng khi <html data-theme="dark"> — thuộc tính này CHỈ
   được set bằng JS khi người dùng bấm .theme-toggle (xem assets/js/main.js)
   hoặc do script chống nháy inline trong <head> (header.php) đọc lại lựa
   chọn đã lưu ở localStorage (key "ecolux-theme"). TUYỆT ĐỐI không có
   @media (prefers-color-scheme) nào ở đây — dark mode là tính năng OPT-IN,
   không tự bật theo hệ điều hành (nguyên tắc bất biến #4 trong spec).

   Vì mọi component (components.css/products.css/pages.css/entry-content.css)
   đã tham chiếu SEMANTIC ALIAS (--color-bg, --color-text, --shadow-card…),
   việc đè lại alias ở đây tự động lan toả toàn site — KHÔNG cần sửa lại
   từng file component, TRỪ 4 "leak" đọc thẳng primitive token cố định (đã
   vá riêng ngay tại component tương ứng — xem ghi chú "DARK MODE — vá leak"
   trong components.css/products.css/entry-content.css).
   ============================================================ */

:root {

  /* 2.1 Primitive mới cho Dark — bổ sung, KHÔNG đổi primitive bản sáng ở trên.
     Hệ "overlay ấm": near-black #0A0A0A trộn lớp phủ kem ấm theo % tăng dần
     (elevation), giữ cảm giác "lux" thay vì xám lạnh kiểu Material Dark. */

  /* Nền — 4 cấp độ nổi */
  --color-dark-bg:             #0A0A0A; /* Cấp 0 — page background */
  --color-dark-bg-subtle:      #111111; /* Cấp 1 — section xen kẽ */
  --color-dark-surface:        #181817; /* Cấp 2 — card / surface */
  --color-dark-surface-raised: #1F1F1E; /* Cấp 3 — hover / modal / code block */
  --color-dark-bg-inverse:     #050505; /* Đáy — footer, mobile overlay */

  /* Text — không dùng trắng tinh #FFFFFF cho body text (chói trên nền đen) */
  --color-dark-text:           #F5F3EF;
  --color-dark-text-muted:     #B8B3AC;
  --color-dark-text-subtle:    #8F8A83;
  --color-dark-text-disabled:  #5C574F;

  /* Border */
  --color-dark-border:         #232220; /* divider trang trí, tương phản thấp có chủ đích */
  --color-dark-border-strong:  #6B655C; /* input/UI boundary — ≥3:1 trên surface */

  /* Brand accent — "vàng đồng" (bronze-gold), khác amber thuần bản sáng */
  --color-bronze-400: #D9AD72; /* hover / bright state */
  --color-bronze-500: #C9A063; /* CTA button bg mặc định */
  --color-bronze-600: #C49650; /* accent text/link/icon mặc định */
  --color-bronze-700: #B08A4E; /* active/pressed */
  --color-bronze-on:  #171410; /* text đặt TRÊN nền bronze */

  /* Eco green / Info blue — brighten cho đủ tương phản trên nền gần đen */
  --color-green-dark-accent: #22C55E; /* badge/link text eco trên dark */
  --color-blue-dark-accent:  #60A5FA; /* badge IP65 trên dark */
}

:root[data-theme="dark"] {

  /* ── CTA & Interactive ── */
  --color-primary:         var(--color-bronze-500);
  --color-primary-hover:   var(--color-bronze-400); /* sáng lên khi hover — ẩn dụ "đèn tăng độ sáng" trên nền tối */
  --color-primary-active:  var(--color-bronze-700);
  --color-primary-subtle:  rgba(196, 150, 80, 0.15);
  --color-primary-on:      var(--color-bronze-on);

  --color-accent:          var(--color-green-dark-accent);
  --color-accent-hover:    #16A34A; /* green-600 gốc làm hover/pressed */
  --color-accent-subtle:   rgba(34, 197, 94, 0.14);
  --color-accent-on:       var(--color-bronze-on);

  /* ── Surface & Background ── */
  --color-bg:              var(--color-dark-bg);
  --color-bg-subtle:       var(--color-dark-bg-subtle);
  --color-bg-muted:        var(--color-dark-surface);
  --color-bg-inverse:      var(--color-dark-bg-inverse);
  --color-surface:         var(--color-dark-surface);

  /* ── Text ── */
  --color-text:            var(--color-dark-text);
  --color-text-muted:      var(--color-dark-text-muted);
  --color-text-subtle:     var(--color-dark-text-subtle);
  --color-text-disabled:   var(--color-dark-text-disabled);
  --color-text-inverse:    var(--color-dark-text); /* nền inverse vẫn tối → text vẫn sáng */
  --color-text-heading:    #FFFFFF; /* heading trắng thuần nhẹ, nổi hơn 1 bậc so với body */

  /* ── Border ── */
  --color-border:          var(--color-dark-border);
  --color-border-subtle:   #1C1B19;
  --color-border-strong:   var(--color-dark-border-strong);
  --color-border-focus:    var(--color-bronze-600); /* focus ring luôn bronze, dễ thấy nhất */

  /* ── Footer ── */
  --color-footer-bg:         var(--color-dark-bg-inverse);
  --color-footer-text:       var(--color-dark-text-muted);
  --color-footer-muted:      var(--color-dark-text-subtle);
  --color-footer-border:     rgba(196, 150, 80, 0.18); /* hairline bronze thay vì border xám */
  --color-footer-heading:    var(--color-dark-text);
  --color-footer-link:       var(--color-dark-text-muted);
  --color-footer-link-hover: var(--color-bronze-400);

  /* ── Danger/Error — #DC2626 gốc chỉ ~4.10:1 trên nền #0A0A0A (dưới AA
     4.5:1). Dùng red-400 sáng hơn, ~7:1+ trên nền tối (QA gợi ý). ── */
  --color-danger:         #F87171;
  --color-danger-subtle:  rgba(220, 38, 38, 0.12);

  /* ── 3. Shadow → Glow — trên nền gần đen, shadow đen truyền thống vô hình.
     Kết hợp shadow đen bán kính nhỏ + viền sáng mờ 1px (bắt sáng cạnh trên)
     + glow bronze cho phần tử tương tác. ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-md:  0 4px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-lg:  0 14px 28px rgba(0,0,0,0.6), 0 0 24px rgba(196,150,80,0.06);
  --shadow-xl:  0 24px 48px rgba(0,0,0,0.65), 0 0 40px rgba(196,150,80,0.08);

  --shadow-amber:      0 0 0 1px rgba(196,150,80,0.35), 0 4px 20px rgba(196,150,80,0.30), 0 0 36px rgba(196,150,80,0.15);
  --shadow-amber-lg:   0 0 0 1px rgba(196,150,80,0.50), 0 8px 32px rgba(196,150,80,0.40), 0 0 56px rgba(196,150,80,0.22);

  --shadow-card:       0 2px 10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-card-hover: 0 20px 40px rgba(0,0,0,0.65), 0 0 24px rgba(196,150,80,0.12);
  --shadow-nav:        0 2px 24px rgba(0,0,0,0.75);

  /* Scrim cho ảnh nền tối cần chữ đè lên — CHƯA dùng ở bản hiện tại (hero là
     bố cục 2 cột, không phải ảnh nền full-bleed). Chuẩn bị sẵn theo §4.4. */
  --gradient-hero-scrim: linear-gradient(90deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.55) 55%, rgba(5,5,5,0.15) 100%);
}