/* UnifyTrade design tokens — single source of truth. Do not add per-page colors,
   radii or spacing scales; extend this file instead. */

:root {
  color-scheme: dark;
  --bg: #0A0E13;
  --surface: #12181F;
  --surface-raised: #161D26;
  --border: #212A35;
  --border-strong: #2B3644;
  --text: #F1F4F7;
  --text-secondary: #8B96A5;
  --text-muted: #5B6673;

  --cyan: #2DD9CE;          /* primary accent */
  --cyan-dim: rgba(45, 217, 206, 0.12);
  --green: #3ED598;         /* success / positive P&L */
  --green-dim: rgba(62, 213, 152, 0.12);
  --red: #F1667A;           /* danger / negative P&L */
  --red-dim: rgba(241, 102, 122, 0.12);
  --amber: #F4B740;         /* warning */
  --amber-dim: rgba(244, 183, 64, 0.12);
  --purple: #A78BFA;        /* secondary category accent */
  --purple-dim: rgba(167, 139, 250, 0.12);
  --blue: #7CB4FA;          /* tertiary accent (Infrastructure, Swing) */
  --blue-dim: rgba(96, 165, 250, 0.14);


  /* Logo gradient — the mark's own three stops, so it follows the theme.
     See styles/logo.css and scripts/brand-logo.js. */
  --logo-1: #7FF0E8;
  --logo-2: #2DD9CE;
  --logo-3: #12A39B;
  --logo-glow: rgba(45, 217, 206, .55);

  --on-accent: #04211E;     /* text on a cyan/green filled control */
  --overlay: rgba(4, 7, 10, .68);      /* dialog backdrop */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .35);
  --hairline: rgba(255, 255, 255, .08); /* subtle inner border on tiles */

  --radius-lg: 12px;
  --radius-md: 9px;
  --radius-sm: 7px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* Light theme — same system, remapped tokens. Applied by theme-init.js as
   <html data-theme="light"> (chosen directly, or via "System" when the OS
   prefers light). Only tokens change; no page stylesheet needs a second copy. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-raised: #F6F8FB;
  --border: #E2E7EE;
  --border-strong: #C9D2DE;
  --text: #0F1B2D;
  --text-secondary: #4F5D73;
  --text-muted: #6B7A91;

  --cyan: #0A7F79;
  --cyan-dim: rgba(10, 127, 121, 0.12);
  --green: #178A5B;
  --green-dim: rgba(23, 138, 91, 0.12);
  --red: #D23B52;
  --red-dim: rgba(210, 59, 82, 0.11);
  --amber: #A56A05;
  --amber-dim: rgba(165, 106, 5, 0.13);
  --purple: #6D4FD8;
  --purple-dim: rgba(109, 79, 216, 0.12);
  --blue: #2563EB;
  --blue-dim: rgba(37, 99, 235, 0.12);


  --logo-1: #16A79E;
  --logo-2: #0A7F79;
  --logo-3: #075F5A;
  --logo-glow: rgba(10, 127, 121, .40);

  --on-accent: #FFFFFF;
  --overlay: rgba(15, 27, 45, .42);
  --shadow-lg: 0 10px 28px rgba(15, 27, 45, .14);
  --hairline: rgba(15, 27, 45, .06);
}