/* ==========================================================================
   CSS Custom Properties - Personal Runners Club
   90s punk rock zine aesthetic
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #FFE500;      /* Electric Yellow */
  --color-secondary: #FF00FF;    /* Hot Pink */
  --color-accent: #00FFFF;       /* Electric Cyan */
  --color-danger: #FF0000;       /* Pure Red */
  --color-success: #00FF00;      /* Toxic Green */
  --color-ink: #000000;          /* Black */
  --color-canvas: #FFFFFF;       /* White */

  /* Typography */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Courier New", Courier, monospace;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Borders - thick black lines */
  --border: 2px solid var(--color-ink);
  --border-thick: 3px solid var(--color-ink);

  /* Hard shadows - offset, not soft */
  --shadow-small: 2px 2px 0 var(--color-ink);
  --shadow-medium: 4px 4px 0 var(--color-ink);
  --shadow-large: 6px 6px 0 var(--color-ink);

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
}