/* ==========================================================================
   iThuba 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: #2C3E50;    /* iThuba's existing theme color — nav/hero fills */
  --color-paper: #F6F4EF;        /* page background */
  --color-surface: #FFFFFF;      /* card / panel background */
  --color-border: #E7E2D6;       /* section dividers, input borders */
  --color-border-soft: #F0EDE4;  /* row dividers inside cards */

  /* ---- Color: text ---- */
  --color-text: #1B2A3D;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-text-faint: #94A3B8;

  /* ---- Color: accents ---- */
  --color-amber: #E1A83D;        /* growth / primary CTA accent */
  --color-amber-bg: #F1EBDD;
  --color-amber-text: #B8862E;

  --color-teal: #2F9E8F;         /* verified / trust / success */
  --color-teal-bg: #EAF4F2;

  --color-indigo: #4C4E9E;       /* admin / tertiary accent */
  --color-indigo-bg: #EAEAF4;

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

  /* ---- Color: dark sidebar / footer surfaces ---- */
  --color-dark-surface: #1B2A3D;
  --color-dark-text: #FFFFFF;
  --color-dark-text-muted: #B9C2D0;
  --color-dark-text-faint: #7C8CA3;
  --color-dark-active-bg: rgba(225, 168, 61, 0.16);
  --color-dark-hairline: rgba(255, 255, 255, 0.1);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', sans-serif;   /* headings, numerals, wordmark */
  --font-body: 'IBM Plex Sans', 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: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---- 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 30px 70px rgba(27, 42, 61, 0.28);
  --shadow-soft: 0 1px 2px rgba(27, 42, 61, 0.06);
}