/*
  Design Tokens — Infinite Web Solutions
  Schriften lokal einbinden: public/assets/fonts/
  Download Space Grotesk: https://fonts.google.com/specimen/Space+Grotesk
  Download Inter: https://fonts.google.com/specimen/Inter
  Format: woff2
*/

/* ── Lokale Schriften ─────────────────────────────────────────── */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Farben ───────────────────────────────────────────────────── */
:root {
  /* Hintergründe */
  --color-bg:          #070D1A;   /* Deep Midnight — Haupthintergrund */
  --color-surface:     #0F1A2E;   /* Navy Surface — Karten, Nav */
  --color-surface-2:   #162440;   /* Hover-Flächen */
  --color-bg-light:    #F8FAFC;   /* Helle Sektionen */

  /* Marke */
  --color-primary:     #B8FF3C;   /* Electric Lime — Akzent, CTAs */
  --color-primary-dark:#8FCC1A;   /* Lime Hover */

  /* Text */
  --color-text:        #F0F4FF;   /* Off-White auf Dunkel */
  --color-text-muted:  #8B9BB4;   /* Gedimmter Text */
  --color-text-dark:   #0F1A2E;   /* Text auf hellen Flächen */
  --color-text-dark-muted: #4A5568;

  /* Struktur */
  --color-border:      #1E2D45;   /* Trennlinien */
  --color-border-light:#E2E8F0;   /* Trennlinien auf Hellgrundlage */

  /* Helle Sektionen — warm */
  --color-bg-warm:     #FAFAF8;   /* Warmes Off-White */
  --color-border-warm: #E8E4DC;   /* Warme Kartenrahmen */

  /* Feedback */
  --color-error:       #FF4D4D;
  --color-success:     #22C55E;
  --color-warning:     #A85500;   /* Dunkles Amber — Pain-Icons auf Weiß */
  --color-focus:       #B8FF3C;

  /* ── Typografie ─────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Fluid-Skala */
  --text-xs:   clamp(0.75rem,   1vw,    0.875rem);
  --text-sm:   clamp(0.875rem,  1.5vw,  1rem);
  --text-base: clamp(1rem,      2vw,    1.125rem);
  --text-lg:   clamp(1.125rem,  2.5vw,  1.25rem);
  --text-xl:   clamp(1.25rem,   3vw,    1.5rem);
  --text-2xl:  clamp(1.5rem,    4vw,    2rem);
  --text-3xl:  clamp(2rem,      5vw,    3rem);
  --text-4xl:  clamp(2.5rem,    6vw,    4rem);
  --text-hero: clamp(3rem,      8vw,    5.5rem);

  /* Zeilenabstände */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* ── Spacing (8px-Grid) ─────────────────────────────────────── */
  --space-1:   0.5rem;    /*  8px */
  --space-2:   1rem;      /* 16px */
  --space-3:   1.5rem;    /* 24px */
  --space-4:   2rem;      /* 32px */
  --space-6:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-12:  6rem;      /* 96px */
  --space-16:  8rem;      /* 128px */
  --space-24: 12rem;      /* 192px */

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-width:     1200px;
  --content-width:  720px;
  --nav-height:      72px;

  /* ── Radius ─────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Schatten ───────────────────────────────────────────────── */
  --shadow-card:       0 0 0 1px var(--color-border);
  --shadow-card-hover: 0 0 0 1px var(--color-primary),
                       0 8px 32px rgba(184, 255, 60, 0.08);
  --shadow-nav:        0 1px 0 var(--color-border);

  /* ── Übergänge ──────────────────────────────────────────────── */
  --transition:       200ms ease;
  --transition-slow:  350ms ease;
}