/* ============================================================
   MAIN.CSS — Design Tokens, Reset, Base Typography
   The Architect | Phan Hai Nga Advisory
   ============================================================ */

/* Google Fonts — theo Brand Kit khóa: Cormorant Garamond (display) + Be Vietnam Pro (body) + Inter (nhãn/số) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Be+Vietnam+Pro:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&subset=latin,vietnamese&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Primary Colors — Xanh dương chủ đạo (phong thủy: xanh dương + trắng + đen) */
  --color-navy: #0B2E63;
  --color-navy-rgb: 11, 46, 99;
  /* dùng cho rgba(var(--color-navy-rgb), alpha) */
  --color-navy-mid: #123B7A;
  --color-navy-light: #1D5FD6;
  --color-blue: #1565C0;
  --color-blue-bright: #2979FF;

  /* Neutral */
  --color-white: #FFFFFF;
  --color-off-white: #F6F8FB;
  --color-gray-light: #E7EBF2;
  --color-gray-mid: #8892A4;
  --color-gray-dark: #14171C;

  /* Accent — Xanh dương chính (thay Gold cũ, dùng trên nền sáng) */
  --color-accent: #0A66C2;
  --color-accent-light: #5B9BE0;
  --color-accent-dark: #063C78;

  /* Accent — Trắng/xanh rất nhạt (thay Champagne cũ, dùng tiết chế trên nền sáng) */
  --color-accent-alt: #0A66C2;
  --color-accent-alt-rgb: 10, 102, 194;
  /* dùng cho rgba(var(--color-accent-alt-rgb), alpha) */

  /* Semantic */
  --color-success: #00897B;
  --color-warning: #FF8F00;
  --color-danger: #C62828;

  /* Typography — Brand Kit khóa: Cormorant Garamond (display) · Be Vietnam Pro (body) · Inter (nhãn/số) */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Type Scale */
  --text-hero: clamp(2.5rem, 6vw, 4rem);
  --text-h1: clamp(2rem, 4vw, 3.5rem);
  --text-h2: clamp(1.5rem, 3vw, 2.5rem);
  --text-h3: clamp(1.25rem, 2vw, 1.75rem);
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Spacing */
  --container-max: 1280px;
  --container-wide: 1440px;
  --grid-gap: 2rem;
  --section-gap: 6rem;
  --section-gap-sm: 3rem;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 22, 40, 0.12);
  --shadow-lg: 0 16px 48px rgba(10, 22, 40, 0.18);
  --shadow-accent: 0 4px 20px rgba(10, 102, 194, 0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-index layers */
  --z-base: 1;
  --z-card: 10;
  --z-nav: 100;
  --z-modal: 1000;
  --z-overlay: 9999;
}

/* Trên nền xanh đậm, "gold accent" chuyển thành trắng để không bị chìm chữ
   (xanh dương trung bình trên nền xanh đậm không đủ tương phản — khác với
   vàng gold cũ vốn luôn nổi trên nền tối). Áp dụng cho mọi khối nền tối
   và các thành phần tự mang nền tối riêng (tag, nút, pill đang active). */
.hero,
.section--dark,
.section--navy-mid,
.cta-section,
.footer,
.journey-section,
.card--dark,
.tag--navy,
.filter-pill--active,
.pagination__btn--active,
.tab-btn--active {
  --color-accent: var(--color-white);
  --color-accent-dark: var(--color-white);
  --color-accent-alt: var(--color-white);
  --color-accent-alt-rgb: 255, 255, 255;
}

/* ============================================================
   CSS RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-gray-dark);
  background-color: var(--color-off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-navy);
}

h1 {
  font-size: var(--text-h1);
}

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

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

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

p {
  line-height: 1.7;
  color: var(--color-gray-dark);
}

strong {
  font-weight: 600;
  color: var(--color-navy);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Text Colors */
.text-navy {
  color: var(--color-navy);
}

.text-gold {
  color: var(--color-accent);
}

.text-white {
  color: var(--color-white);
}

.text-gray {
  color: var(--color-gray-mid);
}

.text-muted {
  color: var(--color-gray-mid);
}

/* Text Alignment */
.text-center {
  text-align: center;
}

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

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

/* Font Families */
.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

/* Font Weights */
.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Display */
.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

/* Flex utils */
.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-1 {
  gap: 0.5rem;
}

.gap-2 {
  gap: 1rem;
}

.gap-3 {
  gap: 1.5rem;
}

.gap-4 {
  gap: 2rem;
}

/* Spacing */
.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

/* Gold divider */
.divider--accent {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  border: none;
  border-radius: var(--radius-full);
  margin: 1.5rem auto;
}

.divider--accent.left {
  margin-left: 0;
}

/* Section Label */
.section-label {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}