:root {
  /* Fonts */
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* Font Sizes */
  --font-size-1: 0.75rem;
  --font-size-2: 0.875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.125rem;
  --font-size-5: 1.25rem;
  --font-size-6: 1.5rem;
  --font-size-7: 1.75rem;
  --font-size-8: 2rem;
  /* Font Weights */
  --font-weight-1: 300;
  --font-weight-2: 400;
  --font-weight-3: 500;
  --font-weight-4: 600;
  --font-weight-5: 700;
  --font-weight-6: 800;
  --font-weight-7: 900;
  /* Line Heights */
  --line-height-1: 1;
  --line-height-2: 1.2;
  --line-height-3: 1.4;
  --line-height-4: 1.6;
  --line-height-5: 1.8;
  --line-height-6: 2;
  --line-height-7: 2.2;

  /* Colors */
  /* Black */
  --black-10: #afafaf;
  --black-20: #616161;
  --black-30: #929292;
  --black-40: #1e1e1e;
  --brand-50: #000;
  /* White */
  --white-10: #ffffff;
  --white-20: #f5f5f5;
  --white-30: #e9eaed;
  --white-40: #e0e0e0;
  /* Orange */
  --brand-10: #e6e9e9;
  /* --brand-10: #f8f7f4; */
  --brand-20: #ff8a48;
  --brand-30: #ff6d00;
  --brand-40: #fd802e;
  --brand-50: #233c4c;

  /* Semantic colors */
  --color-primary: var(--brand-50);
  --color-muted: var(--black-20);
  --color-surface: var(--white-10);
  --color-secondary: var(--brand-50);

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 1rem;
  --spacing-4: 2rem;
  --spacing-5: 4rem;
  --spacing-6: 8rem;
  --spacing-7: 16rem;

  /* Borders */
  --border-radius-1: 0.25rem;
  --border-radius-2: 0.5rem;
  --border-radius-3: 1rem;
  --border-radius-4: 2rem;
  --border-radius-5: 4rem;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 1px 8px rgba(0, 0, 0, 0.1);
  --shadow-4: 0 1px 16px rgba(0, 0, 0, 0.1);
  --shadow-5: 0 1px 32px rgba(0, 0, 0, 0.1);
}