/**
 * dark-blue — default Ebet skin
 * CSS variables consumed by tailwind.config.ts and globals.css
 */
:root {
  /* Brand colors */
  --color-accent: #199dfc;
  --color-accent-hover: #1485d6;
  --color-accent-dim: #199dfc33;
  --color-primary: #0a1628;
  --color-secondary: #111d32;
  --color-success: #199dfc;
  --color-error: #f85149;
  --color-warning: #d29922;
  --color-info: #58a6ff;

  /* Text */
  --color-text-primary: #f0f6fc;
  --color-text-secondary: #8b949e;
  --color-text-muted: #6e7681;

  /* Borders */
  --color-border: #252d3a;
  --color-border-strong: #30394a;

  /* RGB channels (for Tailwind alpha syntax) */
  --color-primary-rgb: 10 22 40;
  --color-secondary-rgb: 17 29 50;
  --color-surface-light-rgb: 26 39 64;
  --color-surface-lighter-rgb: 37 45 58;

  /* Surfaces */
  --surface-body: #0b1523;
  --surface-header: #060c16;
  --surface-footer: #0b1523;
  --surface-sidebar: #060c1699;
  --deposit-cta-background: #0c1c2e;
  --surface-bottom-nav: #0f1a2b;

  /* Buttons */
  --btn-background: #030f1b;
  --btn-border-width: 1.5px;
  --btn-border-gradient: linear-gradient(324.71deg, #024397 49.93%, #10befd 80.85%);
  --btn-color: #ffffff;
  --btn-active-background: linear-gradient(281.39deg, #10befd -1.83%, #2180fd 33.49%, #024397 75.42%);

  /* Layout / spacing */
  --size-radius-sm: 0.375rem;
  --size-radius-md: 0.5rem;
  --size-radius-lg: 0.75rem;
  --size-header-height: 4rem;
  --size-bottom-nav-height: 4.5rem;
  --size-content-max-width: 80rem;
}

/* Tailwind semantic overrides (success / error) */
.text-green-400,
.text-green-500 {
  color: var(--color-success) !important;
}
.bg-green-500 {
  background-color: var(--color-success) !important;
}
.bg-green-500\/10 {
  background-color: color-mix(in srgb, var(--color-success) 10%, transparent) !important;
}
.bg-green-500\/15 {
  background-color: color-mix(in srgb, var(--color-success) 15%, transparent) !important;
}
.bg-green-500\/20 {
  background-color: color-mix(in srgb, var(--color-success) 20%, transparent) !important;
}
.border-green-500\/20 {
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent) !important;
}
.border-green-500\/30 {
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent) !important;
}

.text-red-400,
.text-red-500 {
  color: var(--color-error) !important;
}
.bg-red-500 {
  background-color: var(--color-error) !important;
}
.bg-red-500\/10 {
  background-color: color-mix(in srgb, var(--color-error) 10%, transparent) !important;
}
.bg-red-500\/15 {
  background-color: color-mix(in srgb, var(--color-error) 15%, transparent) !important;
}
.bg-red-500\/20 {
  background-color: color-mix(in srgb, var(--color-error) 20%, transparent) !important;
}
.border-red-500\/20 {
  border-color: color-mix(in srgb, var(--color-error) 20%, transparent) !important;
}
.border-red-500\/30 {
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent) !important;
}