/* ════════════════════════════════════════
   syz-rodend base.css — design tokens, reset, typography
   Source of truth: design/DESIGN.md v2.1
   ════════════════════════════════════════ */

:root {
  /* 1. Canvas & surfaces */
  --bg-canvas: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F1F5F9;
  --bg-muted: #E2E8F0;

  /* 2. Typography neutrals */
  --text-main: #0F172A;
  --text-body: #334155;
  --text-muted: #64748B;
  --text-faint: #94A3B8;

  /* 3. Functional accents */
  --accent-blue: #1D4ED8;
  --accent-blue-light: #EFF6FF;
  --accent-blue-border: #BFDBFE;
  --accent-cyan: #0284C7;

  --accent-emerald: #059669;
  --accent-emerald-light: #ECFDF5;

  --accent-amber: #D97706;
  --accent-amber-light: #FFFBEB;

  --accent-vermilion: #DC2626;
  --accent-vermilion-light: #FEF2F2;

  /* 4. Borders */
  --border-hairline: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-focus: #2563EB;

  /* 5. Radii & elevation */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-card: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-float: 0 20px 35px -8px rgba(15, 23, 42, 0.12), 0 10px 15px -3px rgba(15, 23, 42, 0.04);

  /* 6. Fonts */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.syz-rodend {
  background-color: var(--bg-canvas);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
body.syz-rodend a { color: var(--accent-blue); text-decoration: none; transition: color 0.15s ease; }
body.syz-rodend a:hover { color: #1E40AF; }
body.syz-rodend img { max-width: 100%; height: auto; }
body.syz-rodend h1, body.syz-rodend h2, body.syz-rodend h3, body.syz-rodend h4 {
  font-family: var(--font-heading);
  color: var(--text-main);
  margin: 0;
}

.szr-container { max-width: 1360px; margin: 0 auto; padding: 0 24px; }

.blueprint-grid-bg {
  position: absolute;
  top: 0; left: 0; right: 0; height: 600px;
  background-image: linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 767px) {
  .szr-container { padding: 0 16px; }
}