/* =============================================
   DESIGN TOKENS — WHZ GAMeS Hub
   Quelle: 05_Design_Tokens.md
   ============================================= */

:root {
  /* --- Farben: GAMeS Hub --- */
  --color-ui-primary:       #1E293B;
  --color-ui-primary-hover: #334155;

  /* --- Farben: Sub-Marken --- */
  --color-wireheadz:        #D72638;
  --color-wireheadz-hover:  #B71E2D;
  --color-ev:               #E91E8C;
  --color-ev-hover:         #C4167A;

  /* --- Farben: Basis --- */
  --color-bg:               #F7F9FC;
  --color-surface:          #FFFFFF;
  --color-border:           #E5E7EB;

  /* --- Farben: Text --- */
  --color-text:             #111827;
  --color-text-secondary:   #6B7280;

  /* --- eSport Hub Sektionen --- */
  --color-hub-wireheadz-bg: #FEF2F2;
  --color-hub-ev-bg:        #FDF2F8;

  /* --- Typografie --- */
  --text-h1:        3.5rem;   /* 56px */
  --text-h2:        2.5rem;   /* 40px */
  --text-h3:        1.75rem;  /* 28px */
  --text-h4:        1.375rem; /* 22px */
  --text-body-lg:   1.125rem; /* 18px */
  --text-body:      1rem;     /* 16px */
  --text-small:     0.875rem; /* 14px */
  --text-label:     0.75rem;  /* 12px */

  --font-family:    'Inter', sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* --- Layout --- */
  --nav-h: 64px;

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

  /* --- Border Radius --- */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1.25rem;   /* 20px */
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);

  /* --- Animation --- */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --ease-default:    ease;
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* --- Layout --- */
  --max-width:        1440px;
  --content-width:    1280px;
  --content-narrow:   800px;
  --page-margin:      5rem;   /* 80px */
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --color-bg:             #0F172A;
  --color-surface:        #1E293B;
  --color-surface-el:     #293548;
  --color-text:           #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-border:         #334155;
  --color-button-primary: #334155;
  --color-button-primary-hover: #475569;
  --color-hub-wireheadz-bg: #3B0808;
  --color-hub-ev-bg:        #2D0A1E;
}

html { scroll-behavior: smooth; }

@keyframes error404In {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.error-page__code { animation: error404In 0.6s var(--ease-in-out, ease) both; }
.error-page__inner > *:not(.error-page__code) {
  animation: error404In 0.5s var(--ease-in-out, ease) both;
}
.error-page__label    { animation-delay: 0.1s; }
.error-page__title    { animation-delay: 0.18s; }
.error-page__desc     { animation-delay: 0.26s; }
.error-page__actions  { animation-delay: 0.34s; }