/* variables.css */

/* Farbvariablen – Sentinel Blue Gradient */
:root {
  --color-blue-deep: #071a3d;        /* sehr dunkles Royal Blue */
  --color-blue-mid: #0f4c81;         /* mittleres Sentinel-Blau */
  --color-blue-light: #1aa7ff;       /* helles, leuchtendes Blau */
  --color-cyan: #00e0ff;             /* futuristisches Cyan */
  --color-white: #ffffff;
  --color-gray-light: #d9d9d9;
  --color-gray-dark: #1a1a1a;

  /* Hintergrundverläufe */
  --gradient-sentinel: linear-gradient(
    135deg,
    var(--color-blue-deep) 0%,
    var(--color-blue-mid) 40%,
    var(--color-blue-light) 70%,
    var(--color-cyan) 100%
  );

  /* Typografie */
  --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-small: 0.9rem;
  --font-size-large: 1.4rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;

  /* Abstände */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Schatten */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* Rundungen */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Animationen & Übergänge */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.35s ease;
  --transition-slow: 0.6s ease;
}