/*
  Farewell Fund — Design Tokens
  Three-layer architecture: primitive -> semantic -> component
  Derived from the brand mark: navy/teal tree-and-dove motif rising from
  an open hand, gold accent, cream background.
*/

:root {
  /* ============ PRIMITIVE: COLOR ============ */
  --navy-900: #0e2f56;
  --navy-800: #123a68;
  --navy-700: #17457c;
  --navy-050: #eaf0f6;

  --teal-800: #1c5265;
  --teal-700: #24647d;
  --teal-600: #2f809d;
  --teal-500: #3d95b3;
  --teal-100: #e2eff3;
  --teal-050: #f1f8fa;

  --gold-600: #7a5f2e;
  --gold-500: #c1a466;
  --gold-400: #d6bf89;
  --gold-200: #ecdfc0;
  --gold-100: #f5ecd8;

  --cream-100: #f8f7f2;
  --cream-050: #fcfbf8;
  --white: #ffffff;

  --ink-900: #16223a;
  --ink-700: #2b3a52;
  --slate-600: #51606f;
  --slate-400: #7c8896;
  --slate-200: #dfe3e7;
  --slate-100: #eceef1;

  --red-600: #b3261e;
  --red-100: #fbe9e7;
  --green-700: #1e7a4c;
  --green-100: #e6f4ec;

  /* ============ PRIMITIVE: TYPE ============ */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-100: 0.8125rem;   /* 13px - fine print */
  --fs-200: 0.875rem;    /* 14px - small */
  --fs-300: 1rem;        /* 16px - body */
  --fs-400: 1.125rem;    /* 18px - body large */
  --fs-500: 1.375rem;    /* 22px - h4 */
  --fs-600: 1.75rem;     /* 28px - h3 */
  --fs-700: 2.25rem;     /* 36px - h2 */
  --fs-800: 2.875rem;    /* 46px - h1 */
  --fs-900: 3.5rem;      /* 56px - hero */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* ============ PRIMITIVE: SPACE (4px base) ============ */
  --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;

  /* ============ PRIMITIVE: RADIUS / SHADOW ============ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(14, 47, 86, 0.06), 0 1px 3px rgba(14, 47, 86, 0.08);
  --shadow-md: 0 4px 12px rgba(14, 47, 86, 0.10), 0 2px 4px rgba(14, 47, 86, 0.06);
  --shadow-lg: 0 12px 32px rgba(14, 47, 86, 0.14), 0 4px 10px rgba(14, 47, 86, 0.08);

  /* ============ PRIMITIVE: MOTION ============ */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-reveal: 500ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* ============ SEMANTIC ============ */
  --color-bg: var(--cream-100);
  --color-bg-alt: var(--white);
  --color-surface: var(--white);
  --color-surface-sunken: var(--cream-050);

  --color-text: var(--ink-900);
  --color-text-muted: var(--slate-600);
  --color-text-on-dark: var(--cream-050);
  --color-text-on-dark-muted: #b9c6d6;

  --color-primary: var(--navy-900);
  --color-primary-hover: #0a2648;
  --color-primary-active: #071c37;
  --color-on-primary: var(--white);

  --color-secondary: var(--teal-700);
  --color-secondary-hover: var(--teal-800);
  --color-on-secondary: var(--white);

  --color-accent: var(--gold-400);
  --color-accent-strong: var(--gold-600);

  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-400);
  --color-focus-ring: #1a8fb0;

  --color-danger: var(--red-600);
  --color-danger-bg: var(--red-100);
  --color-success: var(--green-700);
  --color-success-bg: var(--green-100);

  /* ============ LAYOUT ============ */
  --container-max: 1200px;
  --container-narrow: 780px;
  --header-height: 76px;
}

/* Dark section (footer / banded contrast sections) semantic overrides */
.on-dark {
  --color-bg: var(--navy-900);
  --color-text: var(--color-text-on-dark);
  --color-text-muted: var(--color-text-on-dark-muted);
  --color-border: rgba(255, 255, 255, 0.14);
}