/* ============================================================
   Recycling by Katevara — design tokens
   Mirrors the Figma variable collections (see CLAUDE.md).
   Edit this file when a Figma variable changes; site.css consumes
   the custom properties by name and stays untouched.
   ============================================================ */

:root {
  /* Colours — Figma collection "Colors" */
  --color-brand-orange: #ff9a1a;
  --color-surface-page: #1f1f1f;
  --color-surface-header: #000000;
  --color-surface-raised: #3a3a39;
  --color-text-default: #fefbed;
  --color-foreground-muted: #d8dddb;

  /* Typography — Figma collection "Typography" */
  --font-family-display: "Bicyclette", "Bebas Neue", "Arial Narrow", "Helvetica Neue Condensed", sans-serif-condensed, sans-serif;
  --font-family-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-family-tagline: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --font-size-sm: 0.875rem; /* 14 */
  --font-size-md: 1rem;     /* 16 */
  --font-size-lg: 1.125rem; /* 18 */
  --font-size-xl: 1.5rem;   /* 24 */

  /* Layout */
  --content-max: 1280px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(2rem, 5vw, 3rem);
}