/*
 * Funding Pilot design tokens. Single source of truth for colour, type, space, radius and shadow.
 * Never hard-code a colour or size elsewhere; add a token here first. See docs/brand.md.
 * Phase 2 (React) imports this file unchanged.
 */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Palette: Ink (navy). Authority, trust, night-flight calm ---- */
  --fp-ink-950: #060f1f;
  --fp-ink-900: #0b1b33;
  --fp-ink-800: #132a4c;
  --fp-ink-700: #1f3a63;
  --fp-ink-600: #2f4f7f;

  /* ---- Palette: Slate (neutrals with a cool cast) ---- */
  --fp-slate-700: #364259;
  --fp-slate-600: #4a5873;
  --fp-slate-500: #67748c;
  --fp-slate-400: #95a0b3;
  --fp-slate-300: #c5ccd8;
  --fp-slate-200: #dde2ea;
  --fp-slate-100: #edf0f5;
  --fp-slate-50: #f6f8fb;
  --fp-white: #ffffff;

  /* ---- Palette: Jade (action, "go", growth) ---- */
  --fp-jade-800: #065c4b;
  --fp-jade-700: #08735d; /* white text on this: 5.8:1 */
  --fp-jade-500: #12a886; /* ink text on this: 5.7:1. Use on dark backgrounds */
  --fp-jade-300: #6fd6bb;
  --fp-jade-100: #ddf5ee;

  /* ---- Palette: Beacon (amber highlight). Sparingly: flight paths, markers, emphasis ---- */
  --fp-beacon-500: #f5b23d;
  --fp-beacon-100: #fff3dc;

  /* ---- Palette: Feedback ---- */
  --fp-red-600: #c2412d;
  --fp-red-100: #fbe7e3;

  /* ---- Semantic roles (use these in components) ---- */
  --color-bg: var(--fp-slate-50);
  --color-surface: var(--fp-white);
  --color-surface-sunken: var(--fp-slate-100);
  --color-text: var(--fp-ink-900);
  --color-text-muted: var(--fp-slate-600);
  --color-text-subtle: var(--fp-slate-500);
  --color-border: var(--fp-slate-200);
  --color-border-strong: var(--fp-slate-300);
  --color-action: var(--fp-jade-700);
  --color-action-hover: var(--fp-jade-800);
  --color-action-text: var(--fp-white);
  --color-action-soft: var(--fp-jade-100);
  --color-highlight: var(--fp-beacon-500);
  --color-focus: var(--fp-beacon-500);
  --color-error: var(--fp-red-600);
  --color-error-soft: var(--fp-red-100);

  /* On dark (ink) surfaces */
  --color-dark-bg: var(--fp-ink-900);
  --color-dark-text: var(--fp-white);
  --color-dark-text-muted: #b8c4d9;
  --color-dark-border: rgba(255, 255, 255, 0.12);
  --color-dark-action: var(--fp-jade-500);
  --color-dark-action-text: var(--fp-ink-950);

  /* ---- Typography ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.875rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.025em;
  --tracking-eyebrow: 0.08em;

  /* ---- Space (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;
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --container: 72rem;
  --container-narrow: 40rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Elevation: soft, ink-tinted, never grey-black ---- */
  --shadow-sm: 0 1px 2px rgba(11, 27, 51, 0.06), 0 1px 1px rgba(11, 27, 51, 0.04);
  --shadow-md: 0 6px 20px -6px rgba(11, 27, 51, 0.14), 0 2px 6px rgba(11, 27, 51, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(11, 27, 51, 0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
}