/* ==========================================================================
   CSS Variables - Design Tokens
   ========================================================================== */

:root {
  /* Colors */
  --color-bg-primary: #2b2b2b;
  --color-bg-secondary: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #999999;
  --color-accent: #e8e8e8;
  --color-border: #444444;

  /* Logo colors (colored squares like original) */
  --logo-blue: #5b9bd5;
  --logo-green: #70ad47;
  --logo-yellow: #ffc000;
  --logo-red: #ff5050;

  /* Category label colors */
  --label-green: #56ad21;
  --label-blue: #4396ea;
  --label-yellow: #ffd11a;
  --label-red: #ff401b;

  /* Typography */
  --font-heading: 'Jura', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Font sizes */
  --fs-brand: 2rem;
  --fs-tagline: 0.8rem;
  --fs-nav: 1rem;
  --fs-card-label: 1.5rem;
  --fs-footer: 0.75rem;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Layout */
  --header-height: 80px;
  --site-width: 980px;
  --card-width: 220px;

  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-duration: 0.35s;
  --easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-in: cubic-bezier(0.64, 0, 0.78, 0);

  /* Diagonal angle */
  --diagonal-angle: -70deg;

  /* Z-index layers */
  --z-header: 100;
  --z-dropdown: 200;
}