/* ============================================================
   pragma-tokens.css — Pragma° unified design system v1.0
   Master brand: pragma° (sub-expressions: Recovery Technologies, Health)
   Mark: Infinite Cycle (two overlapping circles ≈ horizontal ∞)
   Apply on: pragma.sognosoft.ch · pragma.nl · pragmarecovery.nl · pragmahealth.nl
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

:root {
  --p-ink: #0F2A4F; --p-cobalt: #2A5BCC; --p-cyan: #4ABED9;
  --p-coral: #E8856E; --p-gold: #C19A4A;
  --p-paper: #F4F1EA; --p-white: #FFFFFF;
  --p-ink-60: rgba(15, 42, 79, 0.60);
  --p-ink-12: rgba(15, 42, 79, 0.12);
  --p-good: #2F7A47;

  --p-font-display: 'Mulish', system-ui, -apple-system, sans-serif;
  --p-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --p-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --p-fs-kicker: 0.75rem;
  --p-fs-body: 1rem;
  --p-fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --p-fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --p-fs-h2: clamp(1.625rem, 3vw, 2.25rem);
  --p-fs-h1: clamp(2rem, 4.6vw, 3.5rem);

  --p-lh-tight: 1.08; --p-lh-snug: 1.3; --p-lh-body: 1.6;
  --p-ls-kicker: 0.18em;

  --p-s-1: 4px; --p-s-2: 8px; --p-s-3: 16px;
  --p-s-4: 24px; --p-s-5: 40px; --p-s-6: 64px;
  --p-s-7: 96px; --p-s-8: 144px;

  --p-r-sm: 4px; --p-r-md: 8px; --p-r-lg: 14px; --p-r-pill: 999px;
  --p-shadow-md: 0 4px 12px rgba(15, 42, 79, 0.08);
  --p-maxw-content: min(100%, 1080px);
  --p-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --p-dur: 220ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--p-font-body); font-size: var(--p-fs-body);
  line-height: var(--p-lh-body); color: var(--p-ink); background: var(--p-paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--p-cobalt); text-decoration: none; transition: color var(--p-dur) var(--p-ease); }
a:hover { color: var(--p-ink); }
img, svg { display: block; max-width: 100%; }

.pragma-kicker {
  font-family: var(--p-font-mono); font-size: var(--p-fs-kicker);
  text-transform: uppercase; letter-spacing: var(--p-ls-kicker);
  color: var(--p-cobalt); font-weight: 500; margin: 0 0 var(--p-s-3);
}
.pragma-kicker--coral { color: var(--p-coral); }
.pragma-kicker--cyan { color: var(--p-cyan); }
.pragma-kicker--gold { color: var(--p-gold); }

.pragma-h1 {
  font-family: var(--p-font-display); font-weight: 800;
  font-size: var(--p-fs-h1); line-height: var(--p-lh-tight);
  letter-spacing: -0.02em; color: var(--p-ink); margin: 0 0 var(--p-s-4);
}
.pragma-h2 {
  font-family: var(--p-font-display); font-weight: 800;
  font-size: var(--p-fs-h2); line-height: var(--p-lh-snug);
  letter-spacing: -0.015em; color: var(--p-ink); margin: 0 0 var(--p-s-3);
}
.pragma-h3 {
  font-family: var(--p-font-display); font-weight: 800;
  font-size: var(--p-fs-h3); line-height: var(--p-lh-snug);
  color: var(--p-ink); margin: 0 0 var(--p-s-2);
}
.lead { font-size: var(--p-fs-lead); line-height: var(--p-lh-body); color: var(--p-ink-60); margin: 0 0 var(--p-s-4); }

.pragma-wordmark {
  font-family: var(--p-font-display); font-weight: 800;
  color: var(--p-ink); letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.pragma-wordmark::after { content: '°'; color: var(--p-cobalt); margin-left: 1px; }

.pragma-btn {
  display: inline-flex; align-items: center; gap: var(--p-s-2);
  padding: var(--p-s-3) var(--p-s-4); background: var(--p-cobalt); color: var(--p-white);
  font-family: var(--p-font-body); font-weight: 600; font-size: var(--p-fs-body);
  border-radius: var(--p-r-pill); border: 0; cursor: pointer;
  transition: background var(--p-dur) var(--p-ease), transform var(--p-dur) var(--p-ease);
  text-decoration: none;
}
.pragma-btn:hover { background: var(--p-ink); color: var(--p-white); transform: translateY(-1px); }
.pragma-btn--ghost { background: transparent; color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--p-ink-12); }
.pragma-btn--ghost:hover { background: var(--p-ink); color: var(--p-white); }

.pragma-section { padding: var(--p-s-6) var(--p-s-4); }
.pragma-section--hero { padding: var(--p-s-7) var(--p-s-4); }
.pragma-section--dark { background: var(--p-ink); color: var(--p-white); }
.pragma-section--dark .pragma-h1,
.pragma-section--dark .pragma-h2,
.pragma-section--dark .pragma-h3 { color: var(--p-white); }
.pragma-section--dark .lead { color: rgba(255,255,255,0.75); }
.pragma-section--dark .pragma-kicker { color: var(--p-cyan); }
.pragma-section--cream { background: var(--p-white); border-top: 1px solid var(--p-ink-12); border-bottom: 1px solid var(--p-ink-12); }
.pragma-container { max-width: var(--p-maxw-content); margin: 0 auto; }

@media (max-width: 640px) {
  .pragma-section { padding: var(--p-s-5) var(--p-s-3); }
  .pragma-section--hero { padding: var(--p-s-6) var(--p-s-3); }
}