/**
 * 21press design tokens — generated from tokens.json
 * Prefer editing tokens.json via MCP (21press-design/update-tokens) or admin.
 */
:root {

  --color-fg: #15202B;
  --color-fg-muted: #5A6B7A;
  --color-bg: #F3F7FB;
  --color-bg-elevated: #FFFFFF;
  --color-border: #D5E0EA;
  --color-accent: #FF4D6D;
  --color-accent-hover: #E63E5C;
  --color-accent-contrast: #FFFFFF;
  --color-focus: #FF4D6D;
  --color-wash: #7DD3C7;
  --color-sun: #FFC857;

  --font-sans: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --type-xs: 0.75rem;
  --type-sm: 0.875rem;
  --type-base: 1.0625rem;
  --type-md: 1.125rem;
  --type-lg: 1.375rem;
  --type-xl: 1.75rem;
  --type-2xl: 2.25rem;
  --type-3xl: 2.85rem;
  --type-4xl: 3.6rem;

  --space-3xs: 0.25rem;
  --space-2xs: 0.375rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  --radius-sm: 0.35rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --radius-xl: 1.35rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(21, 32, 43, 0.05);
  --shadow-md: 0 8px 24px rgba(21, 32, 43, 0.07);
  --shadow-lg: 0 18px 40px rgba(21, 32, 43, 0.09);

  --layout-max: 58rem;
  --layout-content: 40rem;
  --layout-gutter: 1.25rem;

  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
}