/* Design tokens. The ONLY file in the project allowed to contain a hex value.
 *
 * Derived from the VexoHost UI spec with one substitution, per its §2.6: the brand hue is
 * StelarMC's #ff124d instead of #2177FB. Everything else — neutral scales, semantic set,
 * chart indices 2-6 — is the spec's, unchanged, because those are tuned to work under any hue.
 *
 * The two derivatives, computed rather than guessed:
 *   primary        #ff124d = hsl(345 100% 53.5%)   3.86:1 on white -> 14px medium text ONLY
 *   primary-hover  hsl(345 100% 48%)  = #f5003d    ~5% darker
 *   primary-strong hsl(345 100% 40%)  = #cc0033    5.81:1 on white, verified
 * Small or regular-weight white text goes on primary-strong. Never on primary.
 */

:root {
  --vx-primary:        #ff124d;
  --vx-primary-strong: #cc0033;
  --vx-primary-hover:  #f5003d;
  --vx-secondary:      #0f172a;
  /* Cool, because the brand is warm. The spec's orange would sit too close to the pink. */
  --vx-tertiary:       #0891b2;
  --vx-neutral:        #747780;

  /* Light theme */
  --vx-bg: #ffffff;
  --vx-surface: #ffffff;
  --vx-surface-2: #f5f5f5;
  --vx-border: #e5e5e5;
  --vx-text: #0a0a0a;
  --vx-muted: #6b6b6b;
  --vx-muted-2: #8a8a8a;

  --vx-nav-95: rgba(255, 255, 255, 0.95);
  --vx-scroll-thumb: #d4d4d4;
  --vx-scroll-thumb-hover: #a3a3a3;
  --vx-scroll-border: #ffffff;

  --vx-accent-bg: #fff0f4;
  --vx-accent-text: #cc0033;
  --vx-accent-border: #ffd1dd;

  --vx-success: #15803d;  --vx-success-bg: #f0fdf4;
  --vx-warning: #b45309;  --vx-warning-bg: #fffbeb;
  --vx-danger:  #b91c1c;  --vx-danger-bg:  #fef2f2;
  --vx-info:    #cc0033;  --vx-info-bg:    #fff0f4;

  --vx-chart-1: #ff124d;
  --vx-chart-2: #D25700;
  --vx-chart-3: #0e9488;
  --vx-chart-4: #7c3aed;
  --vx-chart-5: #be185d;
  --vx-chart-6: #747780;

  color-scheme: light;
}

html.dark {
  --vx-bg: #131316;
  --vx-surface: #1b1b1f;
  --vx-surface-2: #242429;
  --vx-border: #33333a;
  --vx-text: #f5f5f7;
  --vx-muted: #a3a3ad;
  --vx-muted-2: #d2d2da;

  --vx-nav-95: rgba(27, 27, 31, 0.95);
  --vx-scroll-thumb: #4a4a53;
  --vx-scroll-thumb-hover: #5d5d68;
  --vx-scroll-border: #1b1b1f;

  /* hsl(345 45% 15%) / hsl(345 100% 70%) / hsl(345 45% 26%) — the spec's recipe under our hue. */
  --vx-accent-bg: #37151e;
  --vx-accent-text: #ff668c;
  --vx-accent-border: #602433;

  --vx-success: #4ade80;  --vx-success-bg: #0d3520;
  --vx-warning: #fbbf24;  --vx-warning-bg: #38240b;
  --vx-danger:  #f87171;  --vx-danger-bg:  #3a1414;
  --vx-info:    #ff668c;  --vx-info-bg:    #37151e;

  --vx-chart-1: #ff5c7e;
  --vx-chart-2: #ff9a4d;
  --vx-chart-3: #2dd4bf;
  --vx-chart-4: #a78bfa;
  --vx-chart-5: #f472b6;
  --vx-chart-6: #9ca3af;

  color-scheme: dark;
}