/*
  Design tokens
  Single source of truth for colour, type, spacing and other primitives.
  Change a value here and it updates everywhere the token is used.
*/

:root {
  /* Colour */
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f8fa;
  --color-ink: #161a23;
  --color-body: #3c4250;
  --color-muted: #6b7280;
  --color-border: #e4e6eb;
  --color-border-strong: #d0d3da;
  --color-accent: #2f5cde;
  --color-accent-hover: #2547b3;
  --color-accent-tint: #edf1fd;
  --color-accent-tint-border: #d7e1fb;
  --color-white: #ffffff;

  /* Dark theme (homepage v2 — executive/analytics redesign) */
  --color-dark-bg: #0b0f1a;
  --color-dark-bg-alt: #111827;
  --color-dark-ink: #f5f7fa;
  --color-dark-body: #a8b0c3;
  --color-dark-muted: #6b7488;
  --color-dark-border: #1e2636;
  --color-dark-border-strong: #2a3448;
  --color-accent-bright: #4c7dff;
  --color-accent-bright-hover: #6e96ff;

  /* Typography */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale (fluid where it matters most) */
  --text-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --text-h1: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  --text-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --text-h3: 1.25rem;
  --text-lede: 1.1875rem;
  --text-body: 1rem;
  --text-small: 0.8125rem;
  --text-micro: 0.75rem;

  /* Spacing (4px base unit) */
  --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;

  /* Layout */
  --container-text: 680px;
  --container-wide: 1120px;
  --container-xwide: 1360px;
  --page-padding: 24px;

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-card-hover: 0 2px 8px rgba(15, 23, 42, 0.04);
  --transition-fast: 150ms ease;
}

@media (min-width: 768px) {
  :root {
    --page-padding: 48px;
  }
}