/* ==========================================================================
   variables.css — CSS Custom Properties & Font Declarations
   Richter Kommunikation — AEO & KI-Beratung
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Declarations (self-hosted, DSGVO-compliant)
   -------------------------------------------------------------------------- */

/* Inter — Body font */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

/* Space Grotesk — Heading font */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

/* --------------------------------------------------------------------------
   Design Tokens — Dark Mode (default)
   -------------------------------------------------------------------------- */

:root {
  /* Colors — Background */
  --color-bg-primary: #0D0D0D;
  --color-bg-secondary: #1A1A2E;

  /* Colors — Accent */
  --color-accent-primary: #00D4AA;
  --color-accent-secondary: #FF3366;

  /* Colors — Text */
  --color-text-primary: #F0EDE8;
  --color-text-secondary: #6B7280;

  /* Colors — Utility */
  --color-border: rgba(240, 237, 232, 0.12);
  --color-overlay: rgba(13, 13, 13, 0.85);

  /* Typography */
  --font-heading: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --space-xs: 0.5rem;   /*  8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 2rem;     /* 32px */
  --space-lg: 4rem;     /* 64px */
  --space-xl: 8rem;     /* 128px */

  /* Sizing */
  --max-width: 1200px;
  --border-radius: 12px;
  --border-radius-sm: 6px;
  --border-radius-lg: 20px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 4px 20px rgba(0, 212, 170, 0.2);

  /* Z-index layers */
  --z-below: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 1000;
  --z-modal: 2000;
}

/* --------------------------------------------------------------------------
   Light Mode Override
   -------------------------------------------------------------------------- */

[data-theme="light"] {
  --color-bg-primary: #FAFAF8;
  --color-bg-secondary: #F0EDE8;
  --color-text-primary: #0D0D0D;
  --color-text-secondary: #4B5563;
  --color-border: rgba(13, 13, 13, 0.12);
  --color-overlay: rgba(250, 250, 248, 0.9);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.15);
  --shadow-accent: 0 4px 20px rgba(0, 212, 170, 0.25);
}