:root {

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

  --color-black: #000000;
  --color-white: #ffffff;

  --color-gray-950: #050505;
  --color-gray-900: #0f0f0f;
  --color-gray-850: #131313;
  --color-gray-800: #1a1a1a;
  --color-gray-750: #202020;
  --color-gray-700: #2a2a2a;
  --color-gray-650: #313131;
  --color-gray-600: #3a3a3a;
  --color-gray-500: #6b6b6b;
  --color-gray-400: #a0a0a0;
  --color-gray-300: #d1d1d1;
  --color-gray-200: #e7e7e7;
  --color-gray-100: #f5f5f5;

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

  --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-20: 80px;

  /* =========================
     RADIUS
  ========================= */

  --radius-sm: var(--space-1);   /* 4px */
  --radius-md: var(--space-2);   /* 8px */
  --radius-lg: var(--space-3);   /* 12px */
  --radius-xl: var(--space-4);   /* 16px */

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

  --font-family: 'Poppins', sans-serif;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 48px;
  --font-size-5xl: 64px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.05;
  --line-height-heading: 1.1;
  --line-height-body: 1.6;
  --line-height-relaxed: 1.7;

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

  --container-width: 1230px;

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

  --border-subtle: 1px solid var(--color-gray-700);
  --border-strong: 1px solid var(--color-gray-600);

  /* =========================
     SURFACES
  ========================= */

  --surface-page: var(--color-gray-800);
  --surface-section: var(--color-gray-800);
  --surface-panel: var(--color-gray-850);
  --surface-panel-strong: var(--color-gray-900);

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

  --transition-fast: 0.15s ease;
}