@layer hack-club-theme {
  :root {
    --darker: #121217;
    --dark: #17171d;
    --darkless: #252429;
    --black: #1f2d3d;
    --steel: #273444;
    --slate: #3c4858;
    --muted: #8492a6;
    --smoke: #e0e6ed;
    --snow: #f9fafc;
    --white: #ffffff;
    --red: #ec3750;
    --orange: #ff8c37;
    --yellow: #f1c40f;
    --green: #33d6a6;
    --cyan: #5bc0de;
    --blue: #338eda;
    --purple: #a633d6;
    --text: var(--black);
    --background: var(--white);
    --elevated: var(--white);
    --sheet: var(--snow);
    --sunken: var(--smoke);
    --border: var(--smoke);
    --primary: #ec3750;
    --secondary: #8492a6;
    --accent: #5bc0de;
    --twitter: #1da1f2;
    --facebook: #3b5998;
    --instagram: #e1306c;
    --breakpoint-xs: 32em;
    --breakpoint-s: 48em;
    --breakpoint-m: 64em;
    --breakpoint-l: 96em;
    --breakpoint-xl: 128em;
    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 32px;
    --spacing-5: 64px;
    --spacing-6: 128px;
    --spacing-7: 256px;
    --spacing-8: 512px;
    --font-1: 12px;
    --font-2: 16px;
    --font-3: 20px;
    --font-4: 24px;
    --font-5: 32px;
    --font-6: 48px;
    --font-7: 64px;
    --font-8: 96px;
    --font-9: 128px;
    --font-10: 160px;
    --font-11: 192px;
    --line-height-limit: 0.875;
    --line-height-title: 1;
    --line-height-heading: 1.125;
    --line-height-subheading: 1.25;
    --line-height-caption: 1.375;
    --line-height-body: 1.5;
    --font-weight-body: 400;
    --font-weight-bold: 700;
    --font-weight-heading: var(--font-weight-bold);
    --letter-spacing-title: -0.009em;
    --letter-spacing-headline: 0.009em;
    --size-wide-plus: 2048px;
    --size-wide: 1536px;
    --size-layout-plus: 1200px;
    --size-layout: 1024px;
    --size-copy-ultra: 980px;
    --size-copy-plus: 768px;
    --size-copy: 680px;
    --size-narrow-plus: 600px;
    --size-narrow: 512px;
    --radii-small: 4px;
    --radii-default: 8px;
    --radii-extra: 12px;
    --radii-ultra: 16px;
    --radii-circle: 99999px;
    --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.125);
    --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.0625),
      0 2px 4px rgba(0, 0, 0, 0.0625);
    --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.125);
    --shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.0625),
      0 8px 12px rgba(0, 0, 0, 0.125);
  }

  body {
    font-family: 'Phantom Sans', system-ui, -apple-system, BlinkMacSystemFont,
      'Segoe UI', Roboto, sans-serif;
    font-size: 20px;
  }
  .glass, .container, .card {
    font-size: 1.1em;
    max-width: 900px;
  }
}