/*
 * The Firewood Company design tokens
 * Generated from the Claude Design system export
 *   the-firewood-company-design-system-195b3662-6469-416d-a10b-492c45cce367
 * Single source of truth. Do not redefine these values in any page stylesheet.
 *
 * CHANGE FROM THE EXPORT: the export defined --text-body twice, once as a colour
 * (ink 800) in colors.css and once as a font size (17px) in typography.css. The
 * second definition won, so anything using --text-body as a colour was silently
 * broken. Colour roles are now prefixed --color-, type sizes stay --text-.
 */

:root {
  /* ---------- Colour ramp ---------- */
  --tfc-orange-50: #fff3ec;
  --tfc-orange-100: #ffe1cf;
  --tfc-orange-300: #ff9d63;
  --tfc-orange-500: #fc6621;
  --tfc-orange-600: #e2530f;
  --tfc-orange-700: #b7420c;
  --tfc-orange-900: #5c2306;
  --tfc-ink-900: #1b140f;
  --tfc-ink-800: #2c221a;
  --tfc-ink-600: #544537;
  --tfc-ink-400: #8a7a6b;
  --tfc-bark-700: #4a2c14;
  --tfc-bark-500: #724100;
  --tfc-cream-50: #fdfbf8;
  --tfc-cream-100: #faf5ee;
  --tfc-cream-200: #f2e8db;
  --tfc-sand-300: #e6d7c3;
  --tfc-white: #ffffff;
  --tfc-black: #0d0a08;
  --tfc-green-500: #3f7d45;
  --tfc-green-100: #e4f0e2;
  --tfc-red-500: #c1432e;
  --tfc-red-100: #fbe6e0;

  /* ---------- Colour roles ---------- */
  --color-primary: var(--tfc-orange-500);
  --color-primary-hover: var(--tfc-orange-600);
  --color-primary-active: var(--tfc-orange-700);
  --color-primary-tint: var(--tfc-orange-50);
  --color-on-primary: var(--tfc-white);
  --color-text-heading: var(--tfc-ink-900);
  --color-text-body: var(--tfc-ink-800);
  --color-text-muted: var(--tfc-ink-600);
  --color-text-faint: var(--tfc-ink-400);
  --color-text-on-dark: var(--tfc-cream-50);
  --color-surface-page: var(--tfc-cream-50);
  --color-surface-card: var(--tfc-white);
  --color-surface-sunken: var(--tfc-cream-200);
  --color-surface-dark: var(--tfc-black);
  --color-border: var(--tfc-sand-300);
  --color-border-strong: var(--tfc-ink-400);
  --color-success: var(--tfc-green-500);
  --color-success-tint: var(--tfc-green-100);
  --color-danger: var(--tfc-red-500);
  --color-danger-tint: var(--tfc-red-100);
  --color-focus-ring: var(--tfc-orange-500);

  /* ---------- Type ---------- */
  --font-display: 'TFC Alfa Slab One', Georgia, serif;
  --font-body: 'TFC Work Sans', system-ui, -apple-system, sans-serif;
  --text-display-1: clamp(40px, 5vw, 60px);
  --text-display-2: 36px;
  --text-display-3: 28px;
  --text-h4: 22px;
  --text-lead: 22px;
  --text-body: 17px;
  --text-small: 14px;
  --text-micro: 12px;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;

  /* ---------- Space ---------- */
  --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;
  --container-max: 1180px;
  --container-pad: 24px;

  /* ---------- Effects ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(27, 20, 15, 0.08);
  --shadow-md: 0 4px 14px rgba(27, 20, 15, 0.10);
  --shadow-lg: 0 12px 32px rgba(27, 20, 15, 0.16);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
}