/**
 * Design tokens — aligned with target site (112.css / 582.css / app.css)
 */
:root {
  /* Brand surfaces */
  --color-bg: #fff;
  --color-bg-dark: #1f1f1f;
  --color-bg-card: #333;
  --color-bg-muted: #fafafa;
  --color-bg-subtle: #f9f9f9;
  --color-bg-gray: #e8e8e8;
  --color-bg-overlay: rgba(0, 0, 0, 0.3);

  /* Text */
  --color-text: #000;
  --color-text-inverse: #fff;
  --color-text-muted: rgba(0, 0, 0, 0.5);
  --color-text-secondary: rgba(0, 0, 0, 0.6);
  --color-text-tertiary: rgba(0, 0, 0, 0.4);
  --color-text-inverse-muted: hsla(0, 0%, 100%, 0.7);
  --color-text-inverse-soft: hsla(0, 0%, 100%, 0.6);
  --color-text-disabled: #888;

  /* Accent — market / status */
  --color-up: #44b400;
  --color-down: #ff2828;
  --color-down-alt: #ff5858;
  --color-accent-green: #9ee970;
  --color-accent-purple: #a5a6f5;
  --color-accent-blue: rgba(2, 115, 254, 0.2);

  /* CTA */
  --gradient-cta: linear-gradient(180deg, #ffdc61, #ffbc49);
  --gradient-card: linear-gradient(265deg, #666 -6.96%, #333 129.37%);
  --gradient-green-glow: linear-gradient(180deg, transparent, #9ee970);
  --gradient-purple-glow: linear-gradient(180deg, transparent, #a5a6f5);
  --gradient-green-soft: linear-gradient(180deg, transparent, hsla(97, 73%, 68%, 0.3));
  --gradient-blue-soft: linear-gradient(180deg, transparent, rgba(165, 209, 245, 0.3));

  /* Borders & shadows */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-strong: #333;
  --color-border-input: rgba(0, 0, 0, 0.2);
  --color-border-light: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 0.14rem 0.24rem rgba(0, 0, 0, 0.06);
  --shadow-stat: 0 0.56rem 0.54rem rgba(0, 0, 0, 0.04);

  /* News card on dark mobile home */
  --color-news-card: hsla(0, 0%, 93%, 0.5);

  /* Radius */
  --radius-sm: 0.08rem;
  --radius-md: 0.16rem;
  --radius-lg: 0.2rem;
  --radius-pill: 0.24rem;
}