/* Design tokens — the single source of truth for color, type, spacing.
   Change values here to re-theme the whole site. */
:root {
  /* ---- Color: dark, editorial, north-Atlantic ---- */
  --color-bg: #0a0d0c;
  --color-bg-elevated: #121615;
  --color-bg-elevated-2: #181d1c;
  --color-border: rgba(242, 240, 234, 0.1);
  --color-border-strong: rgba(242, 240, 234, 0.18);

  --color-text: #f2f0ea;
  --color-text-muted: #a8ada8;
  --color-text-faint: #6f766f;

  --color-accent: #7fb69e;        /* fjord / moss green */
  --color-accent-strong: #a9d4bf;
  --color-accent-bg: rgba(127, 182, 158, 0.12);

  --color-warm: #d8b26a;          /* wool / amber accent */
  --color-warm-strong: #e8c98d;
  --color-warm-bg: rgba(216, 178, 106, 0.12);

  --color-placeholder-border: rgba(216, 178, 106, 0.45);
  --color-placeholder-bg: rgba(216, 178, 106, 0.08);

  --color-danger: #d87a6a;

  /* ---- Type ---- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --text-4xl: clamp(2.75rem, 1.8rem + 4.2vw, 5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Shape ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;

  /* ---- Layout ---- */
  --content-width: 1120px;
  --content-width-narrow: 760px;
}