/* ============================================================
   Hyper Charts — Color tokens
   Extracted from the Hyper Charts ✦ FREE Figma file.
   Base palette + semantic aliases. Dark theme via [data-theme="dark"].
   ============================================================ */
:root {
  /* ---- Brand: purple / violet ---- */
  --brand-lime:        #CFF002; /* logo accent, primary highlight */
  --brand-violet:      #B771F3; /* the signature Hyper purple (most-used fill) */
  --brand-violet-deep: #8338EC; /* deep electric purple */
  --brand-violet-soft: #8676FF; /* button / interactive violet */
  --brand-periwinkle:  #8C9DF5; /* soft series color */
  --brand-periwinkle-2:#B4B8E4;

  /* ---- Chart / data series ---- */
  --series-violet:  #B771F3;
  --series-orange:  #FE7E07;
  --series-lime:    #CFF002;
  --series-green:   #2ACF56;
  --series-neon:    #63FF3B; /* dark-theme glow green */
  --series-pink:    #FF006E;
  --series-amber:   #FFBE0C;
  --series-blue:    #8C9DF5;
  --series-red:     #FF2D2E;

  /* ---- Semantic status ---- */
  --positive: #2ACF56; /* up / gain */
  --negative: #FF2D2E; /* down / loss */
  --warning:  #FFBE0C;
  --info:     #8676FF;

  /* ---- Neutrals (cool, slightly indigo) ---- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FBFBFD;
  --gray-50:  #F4F4F8;
  --gray-100: #EDEDF3;
  --gray-200: #D0D0DA; /* hairline borders, gridlines */
  --gray-300: #B3B3C5;
  --gray-400: #96969D; /* muted captions */
  --gray-500: #5B5B65; /* secondary text */
  --gray-700: #424141; /* primary text on light */
  --gray-900: #1A1A1F;
  --ink:      #0A0909; /* true near-black (logo, dark surfaces) */
  --indigo-ink: #383874; /* deep indigo used for indicator numerals */

  /* ---- Glow tints (chart shadows) ---- */
  --glow-orange: rgba(255,111,52,0.19);
  --glow-green:  rgba(99,255,59,0.41);
  --glow-violet: rgba(108,73,172,0.16);

  /* ============================================================
     Semantic aliases — LIGHT (default)
     ============================================================ */
  --bg-canvas:      #ECECEE; /* app backdrop (Set Product gray) */
  --bg-subtle:      #F4F4F8;
  --surface-card:   #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F4F4F8;
  --surface-inverse:#0A0909;

  --border-subtle:  #EDEDF3;
  --border-default: #D0D0DA;
  --border-strong:  #B3B3C5;

  --text-primary:   #1A1A1F;
  --text-secondary: #5B5B65;
  --text-muted:     #96969D;
  --text-on-brand:  #FFFFFF;
  --text-on-lime:   #0A0909;

  --accent:         #8676FF; /* primary interactive */
  --accent-hover:   #6E5DF5;
  --accent-press:   #5B49E0;
  --focus-ring:     rgba(134,118,255,0.45);

  --grid-line:      #EDEDF3;
  --axis-label:     #96969D;
}

/* ============================================================
   Dark theme
   ============================================================ */
[data-theme="dark"] {
  --bg-canvas:      #2E333A; /* slate canvas */
  --bg-subtle:      #23272D;
  --surface-card:   #0C0D0E; /* near-black card */
  --surface-raised: #141518;
  --surface-sunken: #000000;
  --surface-inverse:#FFFFFF;

  --border-subtle:  #1E2024;
  --border-default: #2A2D33;
  --border-strong:  #3A3F47;

  --text-primary:   #FFFFFF;
  --text-secondary: #B3B3C5;
  --text-muted:     #6A6A75;
  --text-on-brand:  #FFFFFF;
  --text-on-lime:   #0A0909;

  --accent:         #63FF3B; /* neon green is the dark-theme hero */
  --accent-hover:   #7BFF59;
  --accent-press:   #4FE02C;
  --focus-ring:     rgba(99,255,59,0.40);

  --grid-line:      #23262B;
  --axis-label:     #6A6A75;

  /* series stay vivid on black */
  --series-green:   #63FF3B;
}