/* ===== design-tokens.css ===== */

:root {
  /* === Farben === */
  --color-bg: #fff;
  --color-text: #111111;
  --color-heading: #006FAE;
  --color-primary: #0078B8;
  --color-primary-light: #C1E4FE;
  --color-secondary: #F4FAFE;
  --color-card-bg: #E4F4FF;
  --color-accent: #FFAA00;

  /* === Zustand-Farben === */
  --color-success: #4caf50;
  --color-error: #f44336;
  --color-warning: #ffc107;

  /* === Schriftarten === */
  --font-heading: Poppins, Arial, sans-serif;
  --font-body: Roboto, Arial, sans-serif;
  --font-poppins: var(--font-heading);
  --font-roboto: var(--font-body);

  /* === Buttons & Effekte === */
  --color-button-text: #000000;
  --gradient-button: linear-gradient(to bottom, #ffaa00, #e29400);

  --color-button-hover-start: #ff9900;
  --color-button-hover-end: #ff8800;
  --gradient-button-hover: linear-gradient(to right, var(--color-button-hover-start), var(--color-button-hover-end));
}

[data-theme="dark"] {
  --color-bg: #111111;
  --color-text: #eeeeee;
  --color-heading: #4fc3f7;
  --color-card: #1a1a1a;
  --color-primary: #00bcd4;
  --color-primary-light: #80deea;
  --color-secondary: #263238;
  --color-accent: #ffb300;
  --color-button-text: #ffffff;
  --gradient-button: linear-gradient(to bottom, #ffc107, #ff9800);
}