:root{

  /* ==========================================
     COLORS
  ========================================== */

  --hp-bg: #f7f5f1;
  --hp-surface: #ffffff;

  --hp-text: #15181d;
  --hp-muted: #6e737a;

  --hp-line: #e3e5e8;

  --hp-blue: #174a8b;
  --hp-blue-dark: #103866;
  --hp-blue-soft: #eaf0f7;

  --hp-red: #c62828;

  --hp-dark: #111419;

  /* ==========================================
     TYPOGRAPHY
  ========================================== */

  --hp-font-family: "Inter", sans-serif;

  --hp-font-xs: 0.75rem;
  --hp-font-sm: 0.875rem;
  --hp-font-base: 1rem;
  --hp-font-lg: 1.125rem;
  --hp-font-xl: 1.5rem;
  --hp-font-2xl: 2rem;
  --hp-font-3xl: 2.75rem;

  /* ==========================================
     LAYOUT
  ========================================== */

  --hp-container: 1180px;
  --hp-sidebar: 320px;

  /* ==========================================
     SPACING
  ========================================== */

  --hp-space-xs: .25rem;
  --hp-space-sm: .5rem;
  --hp-space-md: 1rem;
  --hp-space-lg: 1.5rem;
  --hp-space-xl: 2rem;
  --hp-space-2xl: 3rem;
  --hp-space-3xl: 4rem;

  /* ==========================================
     BORDERS
  ========================================== */

  --hp-radius-sm: 8px;
  --hp-radius: 12px;
  --hp-radius-lg: 18px;

  /* ==========================================
     SHADOWS
  ========================================== */

  --hp-shadow-sm: 0 4px 12px rgba(16,24,40,.06);
  --hp-shadow: 0 14px 36px rgba(16,24,40,.07);
  --hp-shadow-lg: 0 20px 48px rgba(16,24,40,.12);

  /* ==========================================
     TRANSITIONS
  ========================================== */

  --hp-transition: .25s ease;

}