/* ============================================================
   @qnfo/design-system v3.0 — Shared Design Tokens
   Unified across all QNFO/QWAV properties.
   ============================================================ */

/* ── Imports ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── CSS Custom Properties (Design Tokens) ── */
:root {
  /* Color Palette */
  --blue:        #1a56db;
  --blue-dark:   #1e40af;
  --blue-light:  #c7d2fe;
  --blue-subtle: #eef2ff;
  --purple:      #7c3aed;
  --purple-dark: #5b21b6;
  --green:       #059669;
  --green-light: #a7f3d0;
  --orange:      #ea580c;
  --gray:        #6b7280;

  /* Neutrals */
  --text:        #1a1a2e;
  --text-muted:  #6b7280;
  --bg:          #ffffff;
  --bg-subtle:   #f9fafb;
  --border:      #e5e7eb;
  --radius:      8px;
  --radius-lg:   12px;

  /* Typography */
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:   'Consolas', 'Monaco', 'Courier New', monospace;

  /* Spacing */
  --space-xs:    0.25rem;
  --space-sm:    0.5rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2rem;
  --space-2xl:   3rem;

  /* Layout */
  --max-width:   960px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1);

  /* Transitions */
  --transition: 150ms ease;
}

/* ── Base Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  line-height: 1.3;
  color: var(--text);
}

h1 { font-size: 2rem; margin-bottom: var(--space-lg); }
h2 { font-size: 1.5rem; margin-bottom: var(--space-md); }
h3 { font-size: 1.25rem; margin-bottom: var(--space-sm); }
h4 { font-size: 1.1rem; }

p { margin-bottom: var(--space-md); }

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--blue-dark); text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-subtle);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--border);
}

pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
}
pre code {
  background: none;
  border: none;
  padding: 0;
}

blockquote {
  border-left: 3px solid var(--blue);
  padding-left: var(--space-md);
  color: var(--text-muted);
  margin: var(--space-md) 0;
}

/* ── Layout ── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ── Grid System ── */
.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ── Utility Classes ── */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.875rem; }
.font-sans { font-family: var(--font-sans); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mb-2 { margin-bottom: var(--space-md); }