/* ==========================================================================
   ClimateMCP concept, design tokens
   Deliberately NOT teal/green (every real competitor lives there) and NOT
   BYJonathanLevy Media's palette or type system. This is its own brand.
   ========================================================================== */

:root {
  /* ---- Color: ink/graphite neutrals ---- */
  --ink-950: #0a0b0d;   /* page background */
  --ink-900: #111317;   /* raised surface / cards */
  --ink-800: #1a1d22;   /* card border, subtle fill */
  --ink-700: #262a31;   /* dividers, input borders */
  --ink-600: #3a3f48;   /* muted icons, inactive strokes */
  --ink-500: #5b616b;   /* secondary text on dark */

  /* ---- Color: warm paper (text + light surfaces) ---- */
  --paper-100: #f6f2e9;  /* primary text on dark */
  --paper-200: #e9e3d4;  /* secondary text on dark */
  --paper-300: #cfc6ad;  /* tertiary / caption text on dark */
  --paper-050: #fbf9f4;  /* light-surface background, used sparingly */

  /* ---- Color: accent, brass / ledger-ink amber ---- */
  --accent-500: #c98a2e;  /* primary accent, buttons, highlighted nodes */
  --accent-400: #e0a94f;  /* hover / lighter emphasis */
  --accent-600: #a06e22;  /* pressed / darker emphasis */
  --accent-glow: rgba(201, 138, 46, 0.35);

  /* ---- Color: semantic status (comparison table) ---- */
  --status-yes: #c98a2e;        /* reuse accent, not green */
  --status-yes-bg: rgba(201, 138, 46, 0.12);
  --status-no: #6b7078;
  --status-no-bg: rgba(107, 112, 120, 0.10);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3.25rem;
  --text-4xl: 4.5rem;

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---- Spacing scale (base 4px) ---- */
  --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: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  /* ---- Radius / border ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-hairline: 1px solid var(--ink-700);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 900ms;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --content-pad: clamp(1.25rem, 5vw, 4rem);
}