/* tokens.css — Forty Group redesign design system
   Concept: "Placemaking" — the spaces between buildings.
   Warm ink + paper palette with a single deep navy accent,
   replacing the earlier clay/terracotta test palette. Editorial, sober, confident. */

:root, [data-theme="light"] {
  /* Surfaces */
  --color-bg: #F6F2EA;
  --color-surface: #FBF8F2;
  --color-surface-2: #FFFFFF;
  --color-surface-offset: #EFE9DD;
  --color-ink: #14181D;
  --color-ink-2: #1C222A;
  --color-divider: #DED6C6;
  --color-border: #CFC6B2;

  /* Text */
  --color-text: #1B1A16;
  --color-text-muted: #6B675E;
  --color-text-faint: #A7A192;
  --color-text-inverse: #F5F1E8;
  --color-text-inverse-muted: #B9B6AC;

  /* Header background — brand brown */
  --color-header-bg: #3A2A1E;
  --color-header-bg-active: #241811;
  --color-page-header: #CDB89A;

  /* Accent — Brown (replaces the earlier navy accent; derived from the header brown so both stay in sync) */
  --color-accent: var(--color-header-bg);
  --color-accent-hover: color-mix(in oklab, var(--color-header-bg) 70%, white 30%);
  --color-accent-active: var(--color-header-bg-active);
  --color-accent-highlight: #D4A574;
  --color-accent-tint: color-mix(in oklab, var(--color-accent-highlight) 25%, white 75%);

  /* Secondary accent — Verdigris (used sparingly, stats/dividers) */
  --color-secondary: #5C6E5E;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 2px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(20,24,29,0.06);
  --shadow-md: 0 8px 24px rgba(20,24,29,0.08);
  --shadow-lg: 0 24px 64px rgba(20,24,29,0.16);
  --shadow-header-scrolled: 0 4px 16px rgba(0,0,0,0.18);

  --content-narrow: 640px;
  --content-default: 1080px;
  --content-wide: 1280px;
  --content-full: 100%;

  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Nunito Sans', 'Inter', -apple-system, sans-serif;
  --font-mono: 'Nunito Sans', sans-serif;
  --font-body-nunito: 'Nunito', 'Nunito Sans', -apple-system, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #14181D;
  --color-surface: #191E24;
  --color-surface-2: #1E242B;
  --color-surface-offset: #20262D;
  --color-ink: #F6F2EA;
  --color-divider: #2B323A;
  --color-border: #363E47;

  --color-text: #EDE9DF;
  --color-text-muted: #9B978C;
  --color-text-faint: #666257;
  --color-text-inverse: #14181D;
  --color-text-inverse-muted: #6B675E;

  --color-accent: #3C5DA8;
  --color-accent-hover: #5A78BC;
  --color-accent-active: #01194F;
  --color-accent-highlight: #1B2A44;
  --color-accent-tint: #16223A;

  --color-secondary: #8BA08D;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.5);
}

/* Type scale — fluid clamp() */
:root {
  --text-2xs: 0.6875rem;
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.3rem + 3.5vw, 4.5rem);
  --text-hero: clamp(2.75rem, 1rem + 4.2vw, 5.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-pad-y: clamp(var(--space-16), 9vw, var(--space-32));
  --header-offset: 4.125rem;
  --page-hero-copy: calc(1.75rem + var(--text-2xl) + var(--space-2) + (var(--text-base) * 1.65 * 3));
}