/* ============================================
   ArchiTail AI — Typography System
   Bilingual: English + Chinese
   Reference: UCL Bartlett / UPenn Weitzman portfolio conventions
   ============================================ */

/* --- Font Stack Variables --- */
:root {
  /* English-first stacks (default for en) */
  --font-display: 'Montserrat', 'Noto Sans SC', -apple-system, sans-serif;
  --font-sans: 'Montserrat', 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Space Mono', 'Noto Sans SC', 'Courier New', monospace;

  /* CJK line-height compensation */
  --lh-cjk-offset: 0;
}

/* Chinese-first stacks (when lang="zh") */
:lang(zh),
[data-lang="zh"] {
  --font-display: 'Noto Sans SC', 'Montserrat', '苹方-简', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-sans: 'Noto Sans SC', 'Montserrat', '苹方-简', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Noto Sans SC', 'Space Mono', monospace;
  --lh-cjk-offset: 0.15;
}

/* ============================================
   Display — DM Serif Display / Noto Serif SC
   Used for: Hero headlines, section titles on marketing pages
   Architectural reference: Garamond/Caslon editorial tradition
   ============================================ */

.type-display-hero-xl {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.type-display-hero-lg {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.type-display-section {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ============================================
   Titles — Space Grotesk / Noto Sans SC
   Used for: Page titles, panel headers, card titles
   Architectural reference: Helvetica Neue / Avenir / DIN heading convention
   ============================================ */

.type-title-1 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.type-title-2 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.20;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.type-title-3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
}

/* ============================================
   Body — Space Grotesk / Noto Sans SC
   Used for: Paragraphs, descriptions, UI text
   Architectural reference: Helvetica Neue Light body convention
   ============================================ */

.type-body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

.type-body-md {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

.type-body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
}

/* ============================================
   Labels — Space Grotesk / Noto Sans SC
   Used for: Buttons, tabs, nav items, tags, form labels
   Architectural reference: DIN caption convention
   ============================================ */

.type-label-md {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.type-label-sm {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.30;
  font-weight: 500;
}

/* ============================================
   Mono — Space Mono
   Used for: Dimensions, coordinates, scale indicators, code
   Architectural reference: DIN technical label convention
   ============================================ */

.type-mono-xs {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.40;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.type-mono-sm {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.40;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ============================================
   CJK-specific adjustments
   Chinese text needs more line-height and different spacing
   ============================================ */

:lang(zh) .type-display-hero-xl,
[data-lang="zh"] .type-display-hero-xl {
  font-size: 72px;
  line-height: 1.10;
  letter-spacing: 0.02em;
}

:lang(zh) .type-display-hero-lg,
[data-lang="zh"] .type-display-hero-lg {
  font-size: 60px;
  line-height: 1.12;
  letter-spacing: 0.02em;
}

:lang(zh) .type-display-section,
[data-lang="zh"] .type-display-section {
  font-size: 40px;
  line-height: 1.20;
  letter-spacing: 0.02em;
}

:lang(zh) .type-body-lg,
:lang(zh) .type-body-md,
:lang(zh) .type-body-sm,
[data-lang="zh"] .type-body-lg,
[data-lang="zh"] .type-body-md,
[data-lang="zh"] .type-body-sm {
  line-height: 1.8;
}

/* ============================================
   Color utilities
   ============================================ */

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--accent-ai-500); }
.text-success { color: var(--state-success); }
.text-warning { color: var(--state-warning); }
.text-danger { color: var(--state-danger); }
.text-inherit { color: inherit; }

/* ============================================
   Responsive type scale
   ============================================ */

@media (max-width: 1279px) {
  .type-display-hero-xl { font-size: 64px; }
  .type-display-hero-lg { font-size: 56px; }
  .type-display-section { font-size: 36px; }
  :lang(zh) .type-display-hero-xl,
  [data-lang="zh"] .type-display-hero-xl { font-size: 52px; }
  :lang(zh) .type-display-hero-lg,
  [data-lang="zh"] .type-display-hero-lg { font-size: 44px; }
  :lang(zh) .type-display-section,
  [data-lang="zh"] .type-display-section { font-size: 32px; }
}

@media (max-width: 767px) {
  .type-display-hero-xl { font-size: 44px; line-height: 1.0; }
  .type-display-hero-lg { font-size: 36px; line-height: 1.02; }
  .type-display-section { font-size: 28px; line-height: 1.10; }
  .type-title-1 { font-size: 26px; }
  .type-title-2 { font-size: 20px; }
}