/* ============================================================
   TradeSmartAI — Color tokens
   A high-contrast, industrial palette: red + blue accents on a
   near-black ground, with a neutral grey ramp for surfaces & text.
   ============================================================ */

:root {
  /* --- Brand core ------------------------------------------------ */
  --ts-red: #FF5140;          /* primary action / punchline accent  */
  --ts-blue: #1F80FF;         /* secondary accent / "TRADE" mark     */
  --ts-blue-logo: #2386FE;    /* exact wordmark blue                 */
  --ts-white: #FFFFFF;
  --ts-grey: #737373;
  --ts-grey-light: #E5E5E5;
  --ts-black: #0A0A0A;        /* brand "black" ground (not pure #000) */

  /* --- Red ramp -------------------------------------------------- */
  --ts-red-50:  #FFE9E6;
  --ts-red-100: #FFC9C2;
  --ts-red-300: #FF8576;
  --ts-red-500: #FF5140;      /* = --ts-red */
  --ts-red-600: #ED3A28;
  --ts-red-700: #C42A1B;

  /* --- Blue ramp ------------------------------------------------- */
  --ts-blue-50:  #E6F0FF;
  --ts-blue-100: #C2DBFF;
  --ts-blue-300: #6BA6FF;
  --ts-blue-500: #1F80FF;     /* = --ts-blue */
  --ts-blue-600: #0E66DB;
  --ts-blue-700: #0A4DA6;

  /* --- Neutral ramp (cool-grey, slight warmth removed) ----------- */
  --ts-neutral-0:   #FFFFFF;
  --ts-neutral-50:  #F5F5F5;
  --ts-neutral-100: #E5E5E5;  /* = --ts-grey-light */
  --ts-neutral-200: #CFCFCF;
  --ts-neutral-300: #B0B0B0;
  --ts-neutral-400: #8C8C8C;
  --ts-neutral-500: #737373;  /* = --ts-grey */
  --ts-neutral-600: #525252;
  --ts-neutral-700: #383838;
  --ts-neutral-800: #1F1F1F;
  --ts-neutral-900: #141414;
  --ts-neutral-950: #0A0A0A;  /* = --ts-black */

  /* --- Semantic: surfaces (dark-first, the brand's native mode) -- */
  --surface-base: var(--ts-neutral-950);     /* page ground         */
  --surface-raised: var(--ts-neutral-900);   /* cards on dark        */
  --surface-overlay: var(--ts-neutral-800);  /* menus / dialogs      */
  --surface-inset: #000000;                  /* wells / code         */
  --surface-light: var(--ts-white);          /* light-mode panels    */
  --surface-light-sunken: var(--ts-neutral-50);

  /* --- Semantic: text ------------------------------------------- */
  --text-strong: var(--ts-white);            /* headlines on dark    */
  --text-body: #D6D6D6;                      /* body on dark         */
  --text-muted: var(--ts-neutral-400);       /* captions / meta      */
  --text-on-light: var(--ts-neutral-950);    /* text on light bg     */
  --text-on-light-muted: var(--ts-neutral-500);
  --text-accent: var(--ts-red);
  --text-link: var(--ts-blue);

  /* --- Semantic: borders ---------------------------------------- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-on-light: var(--ts-neutral-100);
  --border-accent: var(--ts-red);

  /* --- Semantic: status ----------------------------------------- */
  --status-success: #19B36B;
  --status-success-soft: rgba(25, 179, 107, 0.14);
  --status-warning: #F5A524;
  --status-warning-soft: rgba(245, 165, 36, 0.14);
  --status-danger: var(--ts-red);
  --status-danger-soft: rgba(255, 81, 64, 0.14);
  --status-info: var(--ts-blue);
  --status-info-soft: rgba(31, 128, 255, 0.14);

  /* --- Brand gradient (signature diagonal black → light) -------- */
  --gradient-hero: linear-gradient(105deg, #000000 0%, #0A0A0A 28%, #2E2E2E 64%, #B8B8B8 100%); /* @kind color */
  --gradient-red-blue: linear-gradient(90deg, var(--ts-blue) 0%, var(--ts-red) 100%); /* @kind color */
  --gradient-fade-dark: linear-gradient(180deg, rgba(10,10,10,0) 0%, var(--ts-black) 88%); /* @kind color */
}