/* cozan design tokens. Copied verbatim from cozan.co.za-astro-site/design-system/tokens.css, which is the
   source of truth: update it there first, then copy it here (and mirror colour changes in Theme/CozanTheme.cs). */
:root, [data-theme="light"] {
  --brand-rose: #ca536b;
  --brand-rose-soft: #fcf6f7;
  --brand-charcoal: #393e41;
  --action: #b23f58;
  --action-hover: #9c3149;
  --on-action: #ffffff;
  --ink: #202020;
  --ink-muted: #5f6670;
  --ink-inverse: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f8f9fa;
  --surface-raised: #ffffff;
  --border: #e8eaed;
  --border-strong: #868c95;
  --focus: #b23f58;
  --workspace-blue: #5495f7;
  --workspace-blue-text: #2f6fd6;
  --workspace-blue-soft: #f5f8fd;
  --web-amber: #f1c352;
  --web-amber-text: #8a5f00;
  --web-amber-soft: #fff9ef;
  --security-green: #75db8f;
  --security-green-text: #1e7a3c;
  --security-green-soft: #f1fdf3;
  --insight-violet: #5f5be7;
  --insight-violet-text: #4f4bd6;
  --insight-violet-soft: #f8f6fe;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --panel: #393e41;
  --on-panel: #ffffff;
  --on-panel-muted: rgba(255, 255, 255, 0.78);
  --panel-line: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 1px 2px rgba(32, 32, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(32, 32, 32, 0.08);
}
[data-theme="dark"] {
  --brand-rose: #e07a90;
  --brand-rose-soft: #2a1a1f;
  --brand-charcoal: #edeef0;
  --action: #e07a90;
  --action-hover: #eb93a6;
  --on-action: #16171a;
  --ink: #edeef0;
  --ink-muted: #9ba1aa;
  --ink-inverse: #16171a;
  --surface: #16171a;
  --surface-muted: #111214;
  --surface-raised: #1f2124;
  --border: #2e3135;
  --border-strong: #6b717a;
  --focus: #eb93a6;
  --workspace-blue: #8fb8fa;
  --workspace-blue-text: #8fb8fa;
  --workspace-blue-soft: #172233;
  --web-amber: #f5c96a;
  --web-amber-text: #f5c96a;
  --web-amber-soft: #2b2414;
  --security-green: #86e0a0;
  --security-green-text: #86e0a0;
  --security-green-soft: #15291c;
  --insight-violet: #a9a6f5;
  --insight-violet-text: #a9a6f5;
  --insight-violet-soft: #1f1e33;
  --danger: #f97066;
  --danger-soft: #2d1715;
  --panel: #1f2124;
  --on-panel: #ffffff;
  --on-panel-muted: rgba(255, 255, 255, 0.78);
  --panel-line: rgba(255, 255, 255, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --container-max: 1200px;
  --measure: 68ch;
  --font-sans: Assistant, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --dur-fast: 150ms;
  --dur-move: 200ms;
  --dur-menu: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}
.display { font-family: var(--font-sans); font-size: 72px; line-height: 72px; font-weight: 800; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.015em; }
.h2 { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 700; }
.h4 { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 700; }
.lead { font-family: var(--font-sans); font-size: 22px; line-height: 32px; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.eyebrow { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.08em; }
.button { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: 15px; line-height: 22px; font-weight: 500; }
.mono-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; }