/*
  Design tokens. Every color, spacing, and type value used across the
  site should trace back to a variable defined here, so the palette
  or scale can change without touching component/section CSS.
*/

:root {
  /* Color */
  --color-canvas: #050d0a;
  --color-surface: #0d1712;
  --color-elevated: #16211c;
  --color-text: #f5f7f5;
  --color-text-muted: #7c8a83;
  --color-text-soft: #b4c0b9;
  --color-border: #1f2b25;
  --color-accent: #6ee7a8;
  --color-accent-soft: #d6f5e3;

  /* On-accent text (canvas-dark text sitting on the mint fill) */
  --color-on-accent: #06120c;

  /* Type */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Section rhythm: clamps to the 80–120px range across viewport sizes */
  --space-section-y: clamp(4rem, 2.75rem + 4.5vw, 6.25rem);
  --space-content-gap: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);

  /* Layout */
  --max-width-page: 1180px;
  --max-width-prose: 640px;
  --radius-pill: 999px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --border-hairline: 1px solid var(--color-border);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
}