/* Odd Bird Systems — design tokens. Source of truth: docs/brand-style-guide.md */
/* Fonts are self-hosted: see @font-face rules at the top of site.css */

:root {
  /* Colour */
  --ob-charcoal: #1F2326;
  --ob-gunmetal: #3A4045;
  --ob-steel: #4A5258;       /* mascot detail tone, not for text */
  --ob-bone: #EDEAE3;
  --ob-sand: #D9D4C8;
  --ob-white: #FFFFFF;
  --ob-coyote: #B8A07E;
  --ob-olive: #5B6142;
  --ob-olive-ink: #4E5338;
  --ob-signal: #E8641F;      /* accent: fills, lenses, CTAs; text only on dark */
  --ob-signal-hover: #F07A38;
  --ob-signal-ink: #A8430E;  /* orange text/links on light backgrounds */
  --ob-meerkat-fur: #A68B63;
  --ob-meerkat-belly: #CDB994;
  --ob-meerkat-shade: #8A7150;

  /* Semantic */
  --ob-bg: var(--ob-bone);
  --ob-bg-alt: var(--ob-sand);
  --ob-bg-dark: var(--ob-charcoal);
  --ob-text: var(--ob-charcoal);
  --ob-text-muted: var(--ob-gunmetal);
  --ob-text-on-dark: var(--ob-bone);
  --ob-text-muted-on-dark: var(--ob-coyote);
  --ob-label: var(--ob-olive-ink);
  --ob-link: var(--ob-signal-ink);
  --ob-link-on-dark: var(--ob-signal);
  --ob-border: rgba(58, 64, 69, 0.22);
  --ob-focus: var(--ob-coyote);

  /* Type */
  --ob-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ob-font-body: "Barlow", system-ui, sans-serif;
  --ob-font-stencil: "Saira Stencil One", "Barlow Condensed", sans-serif;
  --ob-fs-display: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
  --ob-fs-h1: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);
  --ob-fs-h2: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --ob-fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --ob-fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --ob-fs-small: 0.875rem;
  --ob-lh-display: 0.95;
  --ob-lh-body: 1.55;
  --ob-track-display: 0.04em;
  --ob-track-label: 0.4em;

  /* Space (8px grid) */
  --ob-space-1: 0.25rem;
  --ob-space-2: 0.5rem;
  --ob-space-3: 0.75rem;
  --ob-space-4: 1rem;
  --ob-space-6: 1.5rem;
  --ob-space-8: 2rem;
  --ob-space-12: 3rem;
  --ob-space-16: 4rem;
  --ob-space-24: 6rem;
  --ob-space-36: 9rem;
  --ob-content-max: 75rem;
  --ob-text-max: 42rem;

  /* Shape */
  --ob-radius-sm: 6px;
  --ob-radius-btn: 10px;
  --ob-radius-card: 14px;
  --ob-radius-tile: 24px;

  /* Motion */
  --ob-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ob-dur-fast: 150ms;
  --ob-dur: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ob-dur-fast: 0ms; --ob-dur: 0ms; }
}