/* YouthxFood Hub — design tokens
   Primary: Harvest Orange (brand-specified). Neutrals are warm (paired with
   warm orange, cool grays look muddy). Two supporting hues, Field Green
   (growth / sustainability / "Action" pillar) and Dusk Blue (research,
   institutions, "Educate" pillar), are derived via oklch hue-shift from the
   same lightness/chroma curve as the primary ramp so everything reads as one
   family, not three unrelated brand kits stapled together. */

:root {
  /* ---------- Primary: Harvest Orange ---------- */
  --color-orange-50:  oklch(97.5% 0.020 45);
  --color-orange-100: oklch(94% 0.045 45);
  --color-orange-200: oklch(88% 0.085 45);
  --color-orange-300: oklch(80% 0.125 45);
  --color-orange-400: oklch(72% 0.160 42);
  --color-orange-500: oklch(66% 0.185 40);   /* brand primary */
  --color-orange-600: oklch(59% 0.185 38);
  --color-orange-700: oklch(50% 0.165 36);
  --color-orange-800: oklch(41% 0.135 34);
  --color-orange-900: oklch(32% 0.100 32);

  /* ---------- Secondary: Field Green (Action) ---------- */
  --color-green-50:  oklch(97% 0.020 148);
  --color-green-100: oklch(93% 0.050 148);
  --color-green-300: oklch(78% 0.110 148);
  --color-green-500: oklch(60% 0.130 148);
  --color-green-600: oklch(52% 0.120 148);
  --color-green-700: oklch(43% 0.100 148);

  /* ---------- Tertiary: Dusk Blue (Educate / institutional) ---------- */
  --color-blue-50:  oklch(97% 0.015 250);
  --color-blue-100: oklch(93% 0.035 250);
  --color-blue-300: oklch(78% 0.075 250);
  --color-blue-500: oklch(56% 0.110 250);
  --color-blue-600: oklch(48% 0.105 250);
  --color-blue-700: oklch(40% 0.090 250);

  /* ---------- Neutrals: warm gray (tinted toward the orange hue) ---------- */
  --color-neutral-0:   oklch(100% 0 45);      /* pure white surface */
  --color-neutral-25:  oklch(98.5% 0.006 45); /* warm paper */
  --color-neutral-50:  oklch(97% 0.008 45);
  --color-neutral-100: oklch(94% 0.010 45);
  --color-neutral-200: oklch(88% 0.010 45);
  --color-neutral-300: oklch(78% 0.012 45);
  --color-neutral-400: oklch(64% 0.012 45);
  --color-neutral-500: oklch(52% 0.012 45);
  --color-neutral-600: oklch(42% 0.012 45);
  --color-neutral-700: oklch(32% 0.012 45);
  --color-neutral-800: oklch(22% 0.010 45);
  --color-neutral-900: oklch(15% 0.008 45);

  /* ---------- Semantic ---------- */
  --color-success: var(--color-green-600);
  --color-success-bg: var(--color-green-50);
  --color-warning: oklch(74% 0.150 80);
  --color-warning-bg: oklch(96% 0.040 80);
  --color-error: oklch(55% 0.190 27);
  --color-error-bg: oklch(96% 0.035 27);
  --color-info: var(--color-blue-600);
  --color-info-bg: var(--color-blue-50);

  /* ---------- Aliases (use these in product UI) ---------- */
  --color-primary: var(--color-orange-500);
  --color-primary-hover: var(--color-orange-600);
  --color-primary-active: var(--color-orange-700);
  --color-primary-soft: var(--color-orange-100);

  --surface-page: var(--color-neutral-0);
  --surface-sunken: var(--color-neutral-25);
  --surface-card: var(--color-neutral-0);
  --surface-inverse: var(--color-neutral-900);
  --surface-brand: var(--color-orange-500);

  --border-subtle: var(--color-neutral-200);
  --border-default: var(--color-neutral-300);
  --border-strong: var(--color-neutral-400);

  --text-heading: var(--color-neutral-900);
  --text-body: var(--color-neutral-700);
  --text-muted: var(--color-neutral-500);
  --text-on-brand: var(--color-neutral-0);
  --text-link: var(--color-orange-700);
  --text-link-hover: var(--color-orange-800);

  /* Families — "Lara" (brand serif) is a paid font with no files supplied;
     Petrona/Work Sans stand in until real Lara files are added. */
  --font-display: 'Petrona', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Sizes — deck-first scale (headlines run large; the source deck sets
     stats and section words at billboard size against generous white space) */
  --text-display-xl: 96px;
  --text-display-lg: 64px;
  --text-display-md: 48px;
  --text-display-sm: 36px;
  --text-heading-lg: 28px;
  --text-heading-md: 22px;
  --text-heading-sm: 18px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;

  /* Line heights */
  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --leading-tight: 1.1;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Letter-spacing — the deck sets section labels ("W H A T   W E   D O")
     in wide tracked caps; keep that as a reusable eyebrow style */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.28em;
  --tracking-caps: 0.06em;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius — modest rounding; the brand reads clean/institutional rather
     than bubbly, so corners stay small and consistent, never pill-shaped
     except true pill tags (pillar labels) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadow — soft, low-elevation; no colored/glow shadows */
  --shadow-sm: 0 1px 2px rgba(20, 15, 10, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 15, 10, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 15, 10, 0.12);

  /* Motion — quick, purposeful, no bounce (institutional trust + clarity) */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}