:root {
  /* Brand */
  --color-primary: #f5054f;
  --color-primary-hover: #ff2a6a;
  --color-primary-active: #cc0442;
  --color-primary-soft: #ffd6e3;

  --color-accent: #a8ff5a;
  --color-accent-hover: #baff78;
  --color-accent-active: #8fe13f;
  --color-accent-soft: #efffdb;

  /* Neutrals / dark UI foundation */
  --color-bg: #0f0f14;
  --color-bg-elevated: #15151c;
  --color-surface: #1a1a22;
  --color-surface-2: #20202a;
  --color-surface-3: #2a2a35;
  --color-border: #343442;
  --color-border-strong: #4a4a5c;

  /* Text */
  --color-text: #ffffff;
  --color-text-soft: #d6d6df;
  --color-text-muted: #b3b3c0;
  --color-text-dim: #7d7d8d;
  --color-text-inverse: #0f0f14;

  /* Functional */
  --color-success: #4ade80;
  --color-success-bg: #112418;
  --color-warning: #facc15;
  --color-warning-bg: #2a220a;
  --color-danger: #ef4444;
  --color-danger-bg: #2b1114;
  --color-info: #60a5fa;
  --color-info-bg: #101b2d;

  /* Focus / selection */
  --color-focus: #a8ff5a;
  --color-selection-bg: rgba(168, 255, 90, 0.22);
  --color-selection-text: #ffffff;

  /* Overlays */
  --color-overlay: rgba(5, 7, 10, 0.72);
  --color-shadow: rgba(0, 0, 0, 0.35);

  /* RGB versions for rgba() use */
  --rgb-primary: 245, 5, 79;
  --rgb-accent: 168, 255, 90;
  --rgb-bg: 15, 15, 20;
  --rgb-surface: 26, 26, 34;
  --rgb-text: 255, 255, 255;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #f5054f 0%, #a8ff5a 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(245, 5, 79, 0.16) 0%, rgba(168, 255, 90, 0.14) 100%);

  /* Glow */
  --glow-primary: 0 0 0.75rem rgba(245, 5, 79, 0.35);
  --glow-accent: 0 0 0.75rem rgba(168, 255, 90, 0.28);
  --glow-mix: 0 0 1rem rgba(245, 5, 79, 0.18), 0 0 1.2rem rgba(168, 255, 90, 0.14);

  /* UI tokens */
  --link: var(--color-primary);
  --link-hover: var(--color-accent);

  --button-primary-bg: var(--color-primary);
  --button-primary-text: #ffffff;
  --button-primary-hover: var(--color-primary-hover);
  --button-primary-active: var(--color-primary-active);

  --button-secondary-bg: var(--color-surface-2);
  --button-secondary-text: var(--color-text);
  --button-secondary-hover: #2c2c38;
  --button-secondary-border: var(--color-border);

  --button-accent-bg: var(--color-accent);
  --button-accent-text: #0f0f14;
  --button-accent-hover: var(--color-accent-hover);
  --button-accent-active: var(--color-accent-active);

  --input-bg: #13131a;
  --input-border: var(--color-border);
  --input-border-hover: #525267;
  --input-border-focus: var(--color-focus);
  --input-text: var(--color-text);
  --input-placeholder: #7d7d8d;

  --card-bg: var(--color-surface);
  --card-bg-hover: #22222d;
  --card-border: var(--color-border);

  --badge-primary-bg: rgba(245, 5, 79, 0.14);
  --badge-primary-text: #ff7fa6;
  --badge-accent-bg: rgba(168, 255, 90, 0.14);
  --badge-accent-text: #cfff9c;
}

/* Optional basic application */
html {
  color-scheme: dark;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

a {
  color: var(--link);
  text-decoration-color: rgba(var(--rgb-primary), 0.45);
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: rgba(var(--rgb-accent), 0.55);
}

button,
.btn {
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: var(--glow-primary);
}

.btn-primary:hover {
  background: var(--button-primary-hover);
}

.btn-primary:active {
  background: var(--button-primary-active);
}

.btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
}

.btn-secondary:hover {
  background: var(--button-secondary-hover);
}

.btn-accent {
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
  box-shadow: var(--glow-accent);
}

.btn-accent:hover {
  background: var(--button-accent-hover);
}

.btn-accent:active {
  background: var(--button-accent-active);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 30px var(--color-shadow);
}

.card:hover {
  background: var(--card-bg-hover);
}

input,
textarea,
select {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--input-border-hover);
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(168, 255, 90, 0.2);
}

.badge-primary {
  background: var(--badge-primary-bg);
  color: var(--badge-primary-text);
}

.badge-accent {
  background: var(--badge-accent-bg);
  color: var(--badge-accent-text);
}

.alert-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.alert-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid rgba(250, 204, 21, 0.35);
}

.alert-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.alert-info {
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid rgba(96, 165, 250, 0.35);
}