/* ─── Blue Energy – Design Tokens (Blue-Energy-Design) ────────────────────────
   Farbwelt und Typografie sind aus der Hauptseite blue-energy-elektro.de
   übernommen (dort: style.css). Die rohen Markenfarben stehen als --be-*
   Tokens hier drin; alles andere leitet sich davon ab.
   ────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Robotech GP';
  src: url('/fonts/ROBOTECH-GP.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Blue-Energy-Markenfarben (Quelle: Hauptseite style.css) ───────────── */
  --be-midnight:      #0A0F2D;
  --be-energy-cyan:   #00F0FF;
  --be-energy-blue:   #0066CC;
  --be-energy-yellow: #FFD700;
  --be-indigo:        #1A237E;
  --be-deep-blue:     #0D47A1;
  --be-loxone-green:  #8EC642;

  /* ─── Flächen ──────────────────────────────────────────────────────────── */
  --color-bg-base:       #0A0F2D;
  --color-bg-surface:    #101736;
  --color-bg-surface-2:  #16204A;
  --color-bg-elevated:   #1C2856;
  --color-bg-overlay:    rgba(6, 9, 24, 0.78);
  --color-surface-glass: rgba(10, 15, 45, 0.70);
  --color-border-subtle: rgba(120, 160, 220, 0.20);
  --color-border-strong: rgba(140, 185, 235, 0.38);
  --color-border-focus:  #00F0FF;

  /* ─── Typografie-Farben ────────────────────────────────────────────────── */
  --color-text-bright:   #f8fbff;
  --color-text-muted:    #b5c3d8;
  --color-text-dimmed:   #7B8CA8;
  --color-text-inverse:  #0A0F2D;

  /* ─── Primäre Markenfarbe ──────────────────────────────────────────────── */
  /* Energy-Blue als Füllfarbe: 5,5:1 gegen Weiß → AA für Fließtext */
  --color-brand-primary: #0066CC;
  --color-brand-hover:   #1A85E8;
  --color-brand-glow:    rgba(0, 240, 255, 0.22);
  --color-brand-glow-strong: rgba(0, 240, 255, 0.45);

  /* ─── Pro / B2B Welt – technische Akzente (Energy-Cyan) ────────────────── */
  --color-pro-accent:     #00F0FF;
  --color-pro-accent-soft: rgba(0, 240, 255, 0.16);
  --color-pro-surface:    #0B1330;

  /* ─── Maker / Privatkunden-Welt – warme Akzente (Energy-Yellow) ────────── */
  --color-casual-accent:  #FFD700;
  --color-casual-accent-soft: rgba(255, 215, 0, 0.16);
  --color-casual-surface: #141026;

  /* ─── Status & Feedback ────────────────────────────────────────────────── */
  --color-success:      #34D98B;
  --color-success-bg:   rgba(52, 217, 139, 0.14);
  --color-warning:      #FFB020;
  --color-warning-bg:   rgba(255, 176, 32, 0.14);
  --color-error:        #FF5A5A;
  --color-error-bg:     rgba(255, 90, 90, 0.14);
  --color-info:         #00F0FF;
  --color-info-bg:      rgba(0, 240, 255, 0.12);

  /* ─── Verläufe (wie Hauptseite) ────────────────────────────────────────── */
  --gradient-text-cyan:   linear-gradient(90deg, #ffffff, var(--be-energy-cyan));
  --gradient-text-yellow: linear-gradient(90deg, #ffffff, var(--be-energy-yellow));
  --gradient-brand:       linear-gradient(135deg, rgba(10, 15, 45, 0.9) 0%, rgba(26, 35, 126, 0.9) 100%);
  --gradient-cta:         linear-gradient(135deg, var(--be-energy-blue) 0%, #0A4FA8 100%);

  /* ─── Typografie ───────────────────────────────────────────────────────── */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-brand:   'Robotech GP', var(--font-heading);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ─── Radii ────────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ─── Abstände (Spacing) ───────────────────────────────────────────────── */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;  --sp-3:  0.75rem; --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;  --sp-8:  2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  /* ─── Übergänge (Transitions) ──────────────────────────────────────────── */
  --ease-tech: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 150ms var(--ease-tech);
  --transition-normal: 250ms var(--ease-tech);
  --transition-slow: 400ms var(--ease-tech);

  /* ─── Schatten ─────────────────────────────────────────────────────────── */
  --shadow-sm: 0 10px 24px rgba(2, 5, 18, 0.35);
  --shadow-md: 0 18px 44px rgba(2, 5, 18, 0.45);
  --shadow-lg: 0 30px 72px rgba(2, 5, 18, 0.58);
  --shadow-panel: 0 18px 60px rgba(2, 5, 18, 0.48);
  --shadow-glow-blue: 0 0 0 1px rgba(0, 240, 255, 0.24), 0 18px 44px rgba(0, 102, 204, 0.18);
  --shadow-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ─── Layout ───────────────────────────────────────────────────────────── */
  --header-height: 88px;
  --max-width: 1400px;
  --sidebar-width: 320px;
  --site-max-width: 1440px;
  /* Midnight-Basis mit Cyan- und Indigo-Glow – entspricht dem Hauptseiten-Look */
  --site-shell-gradient:
    radial-gradient(ellipse 80% 50% at 18% 0%,   rgba(0, 240, 255, 0.10), transparent 62%),
    radial-gradient(ellipse 70% 55% at 86% 6%,   rgba(26, 35, 126, 0.55), transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(13, 71, 161, 0.22), transparent 65%),
    linear-gradient(180deg, #0A0F2D 0%, #080C24 55%, #0A0F2D 100%);

  /* ─── Container Breiten ────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;
  --container-3xl: 1680px;
}