/* ============================================================
   Yieldz — Color tokens  (values extracted from Yieldz_UI.fig)
   Monochromatic near-black base + the product's cyan accent.
   Accent  = #6DF2FE  (the wallet's active/selected color, most-used
             color in the file, and the logo family)
   Palette also carries the brand's vivid secondary trio + a green
   token system used across the wider platform.
   ============================================================ */

:root {
  /* ---- Accent / brand (cyan — the wallet pop of color) ---- */
  --brand-300: #A9F7FF;
  --brand-400: #8CF4FF;
  --brand-500: #6DF2FE;        /* primary — rgb(109,242,254) */
  --brand-600: #3ED3E2;        /* hover/press deeper */
  --brand-700: #2A9FAD;
  --brand-glow: rgba(109, 242, 254, 0.35);
  --brand-tint: rgba(109, 242, 254, 0.12);

  /* ---- Neutral ramp (exact fig primitives) ---- */
  --neutral-25: #F8F8F8;
  --neutral-50: #E9E9E9;
  --neutral-100: #D9D9D9;
  --neutral-200: #C6C6C6;
  --neutral-300: #A7A7A7;
  --neutral-400: #898989;
  --neutral-500: #595959;
  --neutral-600: #424242;
  --neutral-700: #343434;
  --neutral-800: #222222;
  --neutral-900: #111111;
  --neutral-950: #0B0B0B;
  --neutral-1000: #080808;     /* the real app screen background */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Brand green system (platform / positive) ---- */
  --green-400: #3EFEA2;
  --green-500: #00EC88;        /* brand-500 in the fig variable system */
  --green-600: #01D770;
  --green-700: #01A355;

  /* ---- Vivid secondary trio (personality accents) ---- */
  --accent-yellow: #FFF719;    /* rgb(255,247,25) */
  --accent-green: #77FF23;     /* rgb(119,255,35) */
  --accent-orange: #FF5B23;    /* rgb(255,91,35) */

  /* ---- Semantic status ---- */
  --success-500: #00EC88;
  --success-tint: rgba(0, 236, 136, 0.12);
  --danger-500: #FD4710;       /* rgb(253,71,16) */
  --danger-tint: rgba(253, 71, 16, 0.12);
  --warning-500: #EECB32;      /* rgb(238,203,50) */
  --warning-tint: rgba(238, 203, 50, 0.12);
  --info-500: #4369DE;         /* blue-400 */

  /* ============================================================
     Semantic aliases — reach for THESE in components
     ============================================================ */

  /* Backgrounds & surfaces */
  --bg-app: var(--neutral-1000);      /* #080808 */
  --bg-base: var(--black);            /* pure black chrome (tab/nav bars) */
  --surface-card: var(--neutral-900); /* #111 */
  --surface-raised: var(--neutral-800);/* #222 */
  --surface-input: var(--neutral-900);
  --surface-overlay: rgba(8, 8, 8, 0.72);

  /* Text */
  --text-primary: var(--neutral-25);   /* near-white headings/values */
  --text-body: var(--neutral-50);
  --text-secondary: var(--neutral-300);/* #A7A7A7 */
  --text-muted: var(--neutral-400);    /* #898989 */
  --text-on-brand: var(--neutral-1000);/* dark text on cyan */
  --text-brand: var(--brand-500);

  /* Borders */
  --border-subtle: var(--neutral-800); /* #222 hairlines */
  --border-strong: var(--neutral-700); /* #343434 */
  --border-brand: var(--brand-500);

  /* Interactive */
  --accent: var(--brand-500);
  --accent-hover: var(--brand-400);
  --accent-active: var(--brand-600);

  /* Data viz semantics */
  --up: var(--success-500);
  --down: var(--danger-500);

  /* Links */
  --link: var(--brand-500);
  --link-hover: var(--brand-400);
}