:root {
  /* ==========================================
     Colours
  ========================================== */

  --wal-navy: #1e3a5f;
  --wal-teal: #2a9d8f;
  --wal-coral: #e76f51;

  --wal-bg: #faf9f6;
  --wal-white: #ffffff;
  --wal-grey: #6b7280;
  --wal-border: #d9dee5;

  --wal-teal-light: #eaf7f4;
  --wal-coral-light: #fff1ed;

  /* ==========================================
     Typography
  ========================================== */

  --wal-heading: 'Poppins', sans-serif;

  /* ==========================================
     Border Radius
  ========================================== */

  --wal-radius-sm: 8px;
  --wal-radius-md: 12px;
  --wal-radius-lg: 18px;
  --wal-radius-pill: 999px;

  /* ==========================================
     Shadows
  ========================================== */

  --wal-shadow: 0 8px 24px rgba(30, 58, 95, 0.08);
  --wal-shadow-lg: 0 14px 36px rgba(30, 58, 95, 0.12);

  /* ==========================================
     Layout
  ========================================== */

  --wal-reading-width: 760px;
  --wal-wide: 1200px;

  /* ==========================================
     Spacing Scale
  ========================================== */

  --wal-space-1: 0.25rem;
  --wal-space-2: 0.5rem;
  --wal-space-3: 0.75rem;
  --wal-space-4: 1rem;
  --wal-space-5: 1.25rem;
  --wal-space-6: 1.5rem;
  --wal-space-8: 2rem;
  --wal-space-10: 2.5rem;
  --wal-space-12: 3rem;
  --wal-space-16: 4rem;

  /* ==========================================
   Animation
  ========================================== */

  --wal-transition-fast: 0.18s ease;
  --wal-transition: 0.2s ease;
  --wal-transition-slow: 0.3s ease;

  /* ==========================================
   Focus
  ========================================== */

  --wal-focus: var(--wal-teal);

  /* ==========================================
     Z-Index
  ========================================== */

  --wal-z-header: 100;
  --wal-z-dropdown: 200;
}