/* ============================================================
   BASE.CSS — Reset nhẹ, Typography defaults, Container
   Ecolux Lighting B2B — v1.0
   ============================================================ */

/* ──────────────────────────────────────────
   1. CSS Reset nhẹ
   ────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
}

address {
  font-style: normal;
}

/* ──────────────────────────────────────────
   2. Typography Defaults
   ────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

h5, h6 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

p {
  color: var(--color-text);
  line-height: var(--leading-normal);
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ──────────────────────────────────────────
   3. Container
   ────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-px-tablet);
  }
}

@media (min-width: 1280px) {
  .container {
    padding-inline: var(--container-px-desktop);
  }
}

.container--narrow {
  max-width: 800px;
}

/* ──────────────────────────────────────────
   4. Section Base
   ────────────────────────────────────────── */

.section {
  padding-block: var(--section-py-sm);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-py-md);
  }
}

@media (min-width: 1280px) {
  .section {
    padding-block: var(--section-py-lg);
  }
}

.section--subtle {
  background-color: var(--color-bg-subtle);
}

/* DARK MODE (§4.5) — --color-bg và --color-bg-subtle gần như cùng độ sáng
   theo chủ đích near-black (#0A0A0A/#111111 ≈ 1.06:1), nên KHÔNG dựa vào màu
   nền để tạo nhịp điệu section xen kẽ trong dark mode. Thay bằng hairline
   bronze mờ ở cạnh trên — kỹ thuật phổ biến ở UI tối cao cấp (Stripe, Apple
   Dark Mode): dùng viền/lớp thay vì chênh lệch nền lớn. */
:root[data-theme="dark"] .section--subtle {
  border-top: 1px solid rgba(196, 150, 80, 0.10);
}

.section--dark {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.section--amber {
  background-color: var(--color-primary);
  color: var(--color-primary-on);
}

.section--compact {
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .section--compact {
    padding-block: var(--section-py-sm);
  }
}

.section--spacious {
  padding-block: var(--section-py-md);
}

@media (min-width: 1280px) {
  .section--spacious {
    padding-block: var(--section-py-lg);
  }
}

/* ──────────────────────────────────────────
   5. Grid Base
   ────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .grid {
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .grid {
    gap: var(--space-8);
  }
}

/* ──────────────────────────────────────────
   6. Utility Classes
   ────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center {
  text-align: center;
}

.section-header {
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .section-header {
    margin-bottom: var(--space-12);
  }
}

.section-heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .section-heading {
    font-size: var(--text-3xl);
  }
}

.section-subheading {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* Dùng trong text-center sections để canh giữa subheading */
.section-subheading--centered {
  margin-inline: auto;
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-default),
              transform var(--duration-slow) var(--ease-default);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────────────────────────────
   7. Dark Mode — Chuyển màu mượt (không gây flash lúc load)
   ────────────────────────────────────────── */

/* main.js gắn class này lên <html> CHỈ trong lúc bấm .theme-toggle (~260ms)
   rồi tự gỡ — KHÔNG bật transition này mặc định/toàn thời gian, để không có
   transition nào chạy lúc tải trang (script chống nháy trong header.php đã
   set data-theme TRƯỚC khi CSS được tính lần đầu — nếu để transition chạy
   thường trực, một số trình duyệt/tình huống race condition vẫn có thể vẽ
   ra 1 khung hình chuyển động không mong muốn lúc load). */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color 220ms ease,
              color 220ms ease,
              border-color 220ms ease,
              box-shadow 220ms ease,
              fill 220ms ease,
              stroke 220ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-transitioning,
  .theme-transitioning *,
  .theme-transitioning *::before,
  .theme-transitioning *::after {
    transition: none !important;
  }
}