/* Schriftart von Google Fonts einbinden */
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

@import url('../css/index_cards.css');
@import url('../css/index_hero.css');
@import url('../css/index_nav.css');
@import url('../css/products.css');
@import url('../css/cart.css');
@import url('../css/responsiv.css');

/* ============================
   1. Variablen & Grundgerüst
============================ */
:root {
  --primary-color: hsl(250, 84%, 75%);
  --primary-hover: hsl(250, 65%, 55%);
  --success-color: hsl(75, 55%, 45%);
  --success-hover: hsl(75, 85%, 55%);
  --danger-color: hsl(300, 55%, 65%);
  --danger-hover: hsl(300, 75%, 60%);
  --white: hsl(0, 0%, 100%);
  --second-white: hsl(0, 0%, 90%);
  --bg-dark: hsl(250, 1%, 12%);
  --bg-darkgrey: hsl(250, 1%, 17%);
  --border-lightgrey:  hsl(250, 1%, 22%);
  --shadow: 0 4px 12px hsla(250, 2%, 5%, 0.1);
  --border-radius: 24px;
  --input-color: hsl(250, 5%, 60%);
  --font-primary: 'Segoe UI', Arial, sans-serif;
  --font-hero: 'Abel', sans-serif;
}

* {
  box-sizing: border-box;
  font-family: var(--font-primary); /* Modernere Schriftart */
}

body {
  margin: 0;
  background: var(--bg-dark);
  color: var(--second-white);
  line-height: 1.6;
  cursor: url('../images/cursor_default.png'), auto;
}

a,
button,
.button {
  cursor: url('../images/curcor_pointer.png') 32 32, pointer; /*32×32px Klickpunkt */
}