/* css/variables.css */
:root {
  /* === Colors: Industrial Monochrome === */
  --color-bg: #050505;
  --color-surface: #0a0a0a;
  --color-surface-soft: #111111;

  /* Primary ist Weiß für maximalen Kontrast */
  --color-primary: #FFFFFF; 
  --color-primary-foreground: #000000;

  --color-secondary: #1a1a1a;
  --color-secondary-foreground: #FFFFFF;

  /* Sichtbare Grid-Linien */
  --color-border: #222222;

  --color-text: #EAEAEA;
  --color-text-muted: #888888;
  
  --color-link: #FFFFFF;

  /* === Spacing === */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;       
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 10rem;

  /* === Border Radius: 0px (Sharp) === */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 0px; 

  /* === Fonts === */
  /* Unbounded: Futurisch, eigenwillig, grafisch */
  --font-sans: "Unbounded", system-ui, sans-serif;
  
  /* Azeret Mono: Fett, technisch, gut lesbar */
  --font-mono: "Azeret Mono", monospace;

  /* Anpassungen für diese Schriftarten */
  --leading-tight: 0.95; /* Unbounded kann sehr eng stehen */
  --leading-normal: 1.5;


  /* === Typography (Desktop / Base) === */
  --text-xs: 0.7rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 4rem;
  --text-4xl: 6rem; 

  --leading-normal: 1.4;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;
}

/* Responsive Anpassung der Textgrößen:
   Größere Screens = ursprüngliche Werte (oben),
   kleinere Screens = schrittweise kleinere Variablen,
   damit Headlines nicht aus dem Viewport laufen. */

@media (max-width: 900px) {
  :root {
    --text-2xl: 2.1rem;
    --text-3xl: 3.2rem;
    --text-4xl: 4.5rem;
  }
}

@media (max-width: 600px) {
  :root {
    --text-lg: 1.1rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.8rem;
    --text-3xl: 2.4rem;
    --text-4xl: 3.2rem;
  }
}