/* ═══════════════════════════════════════════════════
   QLM DESIGN TOKENS — v1.0 Production
   Import once, use everywhere.
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Color ──────────────────────────────── */
  --qlm-navy: #0B1929;
  --qlm-navy-soft: #162338;
  --qlm-teal: #00A896;
  --qlm-teal-dark: #007A6E;
  --qlm-teal-subtle: rgba(0, 168, 150, 0.08);
  --qlm-cream: #F8F5F0;
  --qlm-cream-dark: #EDE9E2;
  --qlm-warm-white: #FDFBF8;
  --qlm-ink-mid: #3D3D5C;
  --qlm-ink-light: #6E6E8A;
  --qlm-ink-xlight: #B4B2A9;
  --qlm-rule: #EDE9E2;

  /* ── Typography ─────────────────────────── */
  --qlm-serif: 'Playfair Display', Georgia, serif;
  --qlm-sans: 'DM Sans', -apple-system, sans-serif;
  --qlm-mono: 'DM Mono', monospace;

  /* ── Scale ──────────────────────────────── */
  --qlm-size-display: clamp(54px, 7vw, 104px);
  --qlm-size-h1: 56px;
  --qlm-size-h2: 44px;
  --qlm-size-h3: 28px;
  --qlm-size-body: 16px;
  --qlm-size-small: 13px;
  --qlm-size-micro: 10px;

  /* ── Spacing ────────────────────────────── */
  --qlm-space-xs: 8px;
  --qlm-space-sm: 16px;
  --qlm-space-md: 32px;
  --qlm-space-lg: 64px;
  --qlm-space-xl: 96px;

  /* ── Rule widths ────────────────────────── */
  --qlm-rule-accent: 2px;
  --qlm-rule-hair: 1px;
}

/* Global reset-ish baseline */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--qlm-sans);
  font-weight: 300;
  color: var(--qlm-navy);
  background: var(--qlm-warm-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════ */

/* ── Typography ─────────────────────────────────── */
.qlm-display { font-family: var(--qlm-serif); font-weight: 400; font-size: var(--qlm-size-display); line-height: 0.98; letter-spacing: -0.025em; }
.qlm-h1 { font-family: var(--qlm-serif); font-weight: 500; font-size: var(--qlm-size-h1); line-height: 1; letter-spacing: -0.02em; }
.qlm-h2 { font-family: var(--qlm-serif); font-weight: 500; font-size: var(--qlm-size-h2); line-height: 1.05; letter-spacing: -0.02em; }
.qlm-h3 { font-family: var(--qlm-serif); font-weight: 500; font-size: var(--qlm-size-h3); line-height: 1.1; letter-spacing: -0.015em; }
.qlm-italic { font-style: italic; color: var(--qlm-teal); }

.qlm-body { font-family: var(--qlm-sans); font-weight: 300; font-size: var(--qlm-size-body); line-height: 1.55; color: var(--qlm-ink-mid); }
.qlm-small { font-family: var(--qlm-sans); font-size: var(--qlm-size-small); color: var(--qlm-ink-light); }

.qlm-label {
  font-family: var(--qlm-mono);
  font-size: var(--qlm-size-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qlm-teal);
}

.qlm-mono { font-family: var(--qlm-mono); }

/* ── Section label with trailing rule ──────────── */
.qlm-section-label {
  font-family: var(--qlm-mono);
  font-size: var(--qlm-size-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qlm-teal);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.qlm-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--qlm-rule);
}

/* ── Teal accent rule (2px, signature element) ── */
.qlm-accent-rule {
  position: relative;
}
.qlm-accent-rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--qlm-rule-accent);
  height: 60px;
  background: var(--qlm-teal);
}

/* ── Pill with dot ─────────────────────────────── */
.qlm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--qlm-rule);
  border-radius: 999px;
  font-family: var(--qlm-mono);
  font-size: var(--qlm-size-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qlm-ink-mid);
}
.qlm-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qlm-teal);
}

/* ── Buttons ───────────────────────────────────── */
.qlm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--qlm-teal);
  color: var(--qlm-navy);
  font-family: var(--qlm-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.qlm-btn:hover {
  background: var(--qlm-warm-white);
  gap: 14px;
}
.qlm-btn.on-light { background: var(--qlm-navy); color: var(--qlm-warm-white); }
.qlm-btn.on-light:hover { background: var(--qlm-teal); color: var(--qlm-navy); }

.qlm-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: transparent;
  color: var(--qlm-navy);
  border: 1px solid var(--qlm-navy);
  font-family: var(--qlm-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.qlm-btn-ghost:hover {
  background: var(--qlm-navy);
  color: var(--qlm-teal);
}