/**
 * Dubuz 2026 - HD Typography System
 * Centralized font tokens and responsive hierarchy
 * Updated to Plus Jakarta Sans for exact reference matching
 * (Google Fonts are preloaded via the layout <link> — no @import here.)
 */

:root {
  --font-family-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Plus Jakarta Sans', var(--font-family-primary);
  --font-family-sidebar: 'Plus Jakarta Sans', var(--font-family-primary);
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --weight-extrabold: 800;
  --weight-ultra: 900;

  /* Desktop Sizes */
  --font-display: 48px;
  --font-h1: 32px;
  --font-h2: 24px;
  --font-h3: 20px;
  --font-h4: 16px;
  --font-body-lg: 16px;
  --font-body: 14px;
  --font-label: 13px;
  --font-caption: 12px;
  --font-micro: 11px;

  /* Line Heights */
  --line-display: 56px;
  --line-h1: 40px;
  --line-h2: 32px;
  --line-h3: 28px;
  --line-h4: 24px;
  --line-body: 20px;
  --line-label: 18px;
  --line-caption: 16px;
}

@media (max-width: 767px) {
  :root {
    --font-h1: 24px;
    --font-h2: 20px;
    --font-h3: 18px;
    --font-display: 36px;
    --line-h1: 32px;
    --line-h2: 28px;
    --line-h3: 24px;
  }
}

/* Global resets for HD Design — selector covers legacy html[dir] body
   overrides (quickad-patterns/mobile-app-visual) so this file, loaded
   last, is the single typography source on every layout. */
body,
html[dir] body {
  font-family: var(--font-family-primary);
  font-size: var(--font-body);
  line-height: var(--line-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font-family: var(--font-family-display); font-size: var(--font-h1); line-height: var(--line-h1); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
h2, .h2 { font-family: var(--font-family-display); font-size: var(--font-h2); line-height: var(--line-h2); font-weight: var(--weight-bold); letter-spacing: -0.015em; }
h3, .h3 { font-family: var(--font-family-primary); font-size: var(--font-h3); line-height: var(--line-h3); font-weight: var(--weight-semibold); }
h4, .h4 { font-family: var(--font-family-primary); font-size: var(--font-h4); line-height: var(--line-h4); font-weight: var(--weight-semibold); }

.text-display { font-family: var(--font-family-display); font-size: var(--font-display); line-height: var(--line-display); font-weight: var(--weight-black); letter-spacing: -0.03em; }
.text-body-lg { font-size: var(--font-body-lg); line-height: 24px; }
.text-body { font-size: var(--font-body); line-height: var(--line-body); }
.text-label { font-size: var(--font-label); line-height: var(--line-label); font-weight: var(--weight-semibold); }
.text-caption { font-size: var(--font-caption); line-height: var(--line-caption); color: var(--text-tertiary); }
.text-micro { font-size: var(--font-micro); line-height: 14px; font-weight: var(--weight-medium); }