/* ==========================================================================
   Mukana design tokens
   Extracted from the landing-page and employer-portal mockups.
   Load this before components.css and before any page-specific stylesheet.
   ========================================================================== */

:root {
  /* ---- Color: ink & surfaces ---- */
  --color-ink: #1B2A3D;          /* primary text / dark surfaces */
  --color-ink-theme: #0A2A5E;    /* Mukana's existing theme color — nav/hero fills */
  --color-paper: #F3F4F6;        /* page background */
  --color-surface: #FFFFFF;      /* card / panel background */
  --color-border: #E5E8ED;       /* section dividers, input borders */
  --color-border-soft: #EEF0F4;  /* row dividers inside cards */

  /* ---- Color: text ---- */
  --color-text: #1B2A3D;
  --color-text-secondary: #5B6573;
  --color-text-muted: #7A8494;
  --color-text-faint: #A9B1BE;

  /* ---- Color: accents ---- */
  --color-amber: #FFC72C;        /* growth / primary CTA accent */
  --color-amber-bg: #FFF6DB;
  --color-amber-text: #7A5B00;

  --color-teal: #1D4F9F;         /* verified / trust / success */
  --color-teal-bg: #EEF3FB;

  --color-indigo: #153F85;       /* admin / tertiary accent */
  --color-indigo-bg: #DCE7F7;

  --color-danger: #C0392B;       /* notification dots, destructive state */

  /* ---- Color: dark sidebar / footer surfaces ---- */
  --color-dark-surface: #0A2A5E;
  --color-dark-text: #FFFFFF;
  --color-dark-text-muted: #C5D4EE;
  --color-dark-text-faint: #8FB1E6;
  --color-dark-active-bg: rgba(255, 255, 255, 0.09);
  --color-dark-hairline: rgba(255, 255, 255, 0.1);

  --color-gold: #FFC72C;
  --color-mint: #2E9A74;
  --color-mint-bg: #E6F6EF;
  --color-mint-text: #1F7A59;

  /* ---- Typography ---- */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* headings, numerals, wordmark */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;       /* body copy, UI text */

  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 56px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
  --radius-pill: 4px;

  /* ---- Spacing scale ---- */
  --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-16: 64px;
  --space-20: 76px;

  /* ---- Elevation ---- */
  --shadow-card: 0 10px 30px rgba(10, 42, 94, 0.14);
  --shadow-soft: 0 1px 2px rgba(10, 42, 94, 0.06);
}