:root{
    /* Background */
  --color-bg-base:           #141218;
  --color-bg-surface:        #1f1b24;
  --color-bg-surface-hover:  #2c2733;
  --color-bg-surface-active: #3a3444;

  /* Primary — Gelb */
  --color-primary-soft:    #FFF0A0;
  --color-primary:         #FFD93D;
  --color-primary-hover:   #E6C200;
  --color-primary-pressed: #B89900;

  /* Accent — Lila */
  --color-accent-soft:    #EDE9FE;
  --color-accent:         #A78BFA;
  --color-accent-hover:   #8B5CF6;
  --color-accent-pressed: #6D28D9;

  /* Text auf dunklem Hintergrund */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #a09aad;
  --color-text-disabled:  #5c5668;

  /* Text auf hellem Hintergrund (Sprechblasen) */
  --color-text-light-primary:   #141218;
  --color-text-light-secondary: #5c5668;
  --color-text-light-disabled:  #a09aad;

  /* Sprechblasen-Konturen */
  --color-bubble-player1: #FFD93D;
  --color-bubble-player2: #A78BFA;
  --color-bubble-player3: #096571;
  --color-bubble-bg: #ffffff;

  /* Feedback */
  --color-success: #4ADE80;
  --color-error:   #F87171;
  --color-warning: #FBBF24;

  /* Border Radius */
  --radius-bubble: 35px;
  --radius-card:   20px;
  --radius-button: 12px;
  --radius-sm:     8px;

  /* Font Family */
  --font-primary: "Inter", Arial, Helvetica, sans-serif;
  --font-secondary: "Jersey 10", monospace;

  /* Font Weights */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      800;

  /* Font Style */
  --font-italic: italic; 
}