/* =========================================
   Base CSS - Variables, Reset, Typography
   ========================================= */

:root {
  /* Colors - Raw Brutalist Theme */
  --color-primary: #00FF00;
  /* Neon Green */
  --color-primary-dark: #00CC00;
  --color-secondary: #FFFFFF;
  /* White */

  --color-text-main: #FFFFFF;
  --color-text-light: #CCCCCC;

  --color-bg-body: #000000;
  --color-bg-light: #111111;
  --color-border: #FFFFFF;
  /* Visible White Borders */
  --color-white: #FFFFFF;

  /* Typography */
  --font-family-base: 'Courier New', Courier, monospace;
  --line-height-base: 1.4;

  /* Fluid Typography System - Oversized & Fluid */
  --fs-sm: clamp(0.875rem, 2vw, 1rem);
  --fs-base: clamp(1rem, 3vw, 1.2rem);
  --fs-md: clamp(1.5rem, 4vw, 2rem);
  --fs-lg: clamp(2rem, 5vw, 3rem);
  --fs-xl: clamp(3rem, 8vw, 5rem);
  --fs-xxl: clamp(3.5rem, 12vw, 8rem);

  /* Fluid Spacing */
  --spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
  --spacing-sm: clamp(0.75rem, 2vw, 1.25rem);
  --spacing-md: clamp(1.5rem, 4vw, 2.5rem);
  --spacing-lg: clamp(3rem, 6vw, 5rem);
  --spacing-xl: clamp(4rem, 10vw, 9rem);

  /* Layout */
  --container-width: 1200px;
  --container-padding: clamp(1rem, 5vw, 2rem);
  --border-radius: 0;
  --border-width: 2px;

  /* No shadows, flat design */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 10px 10px 0px var(--color-primary);
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--fs-base);
  line-height: var(--line-height-base);
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  background-color: var(--color-primary);
  color: var(--color-bg-body);
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Typography Helpers */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: var(--fs-xxl);
}

h2 {
  font-size: var(--fs-xl);
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-md);
}

p {
  margin-bottom: var(--spacing-sm);
}

[hidden] {
  display: none !important;
}

/* Brutalist Global Borders */
.container {
  border-left: var(--border-width) solid var(--color-border);
  border-right: var(--border-width) solid var(--color-border);
}

section {
  border-bottom: var(--border-width) solid var(--color-border);
}