/* ============================================================================
   Shared design tokens - "one product, two workspaces".
   AlphaRadar/public/tokens.css and BetaRadar/public/tokens.css must stay
   byte-identical; edit one, copy to the other (no build step in this project).

   Color layers are semantic and must never borrow from each other:
     1. Direction (A-share convention: red = up, green = down) -> --up / --down
     2. State (pass / wait / fail / info)                      -> --state-*
     3. Market regime (defense / neutral / attack temperature) -> --regime-*
     4. Brand accent (per-app override, NOT defined here)      -> --brand / --brand-soft / --brand-deep
     5. Neutrals (light default, dark via [data-theme="dark"])  -> --bg-* / --text-* / --border-*
   Direction and negative numbers: always print an explicit +/- sign; color is
   reinforcement, never the only encoding.
   ========================================================================== */

:root {
  /* size scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* type scale */
  --fs-caption: 11px;
  --fs-label: 12px;
  --fs-body: 13px;
  --fs-h3: 14px;
  --fs-h2: 17px;
  --fs-h1: 26px;
  --fs-num-lg: 20px;
  --fs-num-xl: 32px;
  --lh-tight: 1.25;
  --lh-body: 1.6;
  --font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-drawer: -14px 0 38px rgba(0, 0, 0, .18);

  /* direction (A-share: red up, green down) */
  --up: #d5443c;
  --up-soft: rgba(213, 68, 60, .10);
  --down: #1e8a5c;
  --down-soft: rgba(30, 138, 92, .10);
  --flat: #8a9099;

  /* state */
  --state-ok: #2e7d4f;
  --state-ok-soft: rgba(46, 125, 79, .12);
  --state-warn: #a66f12;
  --state-warn-soft: rgba(166, 111, 18, .12);
  --state-danger: #c0392b;
  --state-danger-soft: rgba(192, 57, 43, .10);
  --state-info: #3979b8;
  --state-info-soft: rgba(57, 121, 184, .11);

  /* market regime (temperature scale: cold blue -> amber -> hot red) */
  --regime-defense: #5b7fa6;
  --regime-neutral: #b07f1e;
  --regime-attack: #c0392b;

  /* neutrals - light theme (Alpha default) */
  --bg-body: #f1f1ef;
  --bg-surface: #f8f8f6;
  --bg-card: #ffffff;
  --bg-muted: #e9e9e6;
  --text-primary: #202124;
  --text-secondary: #666a70;
  --text-tertiary: #7c828a;
  --border-subtle: #ddddda;
  --border-strong: #c8c8c4;
  --header-veil: rgba(248, 248, 246, .88);
  --hover-veil: rgba(255, 255, 255, .55);
}

:root[data-theme="dark"] {
  /* neutrals - dark theme (Beta default) */
  --bg-body: #0f1216;
  --bg-surface: #141920;
  --bg-card: #191f27;
  --bg-muted: #222933;
  --text-primary: #e8ecf1;
  --text-secondary: #9aa6b2;
  --text-tertiary: #77828d;
  --border-subtle: #262d36;
  --border-strong: #364050;
  --header-veil: rgba(15, 18, 22, .88);
  --hover-veil: rgba(255, 255, 255, .04);

  /* brightened for dark-background contrast */
  --up: #ef5b5b;
  --up-soft: rgba(239, 91, 91, .14);
  --down: #43a978;
  --down-soft: rgba(67, 169, 120, .14);
  --flat: #7c8792;
  --state-ok: #4caf7d;
  --state-ok-soft: rgba(76, 175, 125, .14);
  --state-warn: #d29a3a;
  --state-warn-soft: rgba(210, 154, 58, .14);
  --state-danger: #e05a4b;
  --state-danger-soft: rgba(224, 90, 75, .13);
  --state-info: #5fa3dd;
  --state-info-soft: rgba(95, 163, 221, .13);
  --regime-defense: #6d95bf;
  --regime-neutral: #d29a3a;
  --regime-attack: #e05a4b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-drawer: -14px 0 38px rgba(0, 0, 0, .6);
}

/* ------- shared component primitives (badge / card / kicker) --------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; }
.badge--ok { color: var(--state-ok); background: var(--state-ok-soft); border-color: transparent; }
.badge--warn { color: var(--state-warn); background: var(--state-warn-soft); border-color: transparent; }
.badge--danger { color: var(--state-danger); background: var(--state-danger-soft); border-color: transparent; }
.badge--info { color: var(--state-info); background: var(--state-info-soft); border-color: transparent; }
.badge--up { color: var(--up); background: var(--up-soft); border-color: transparent; }
.badge--down { color: var(--down); background: var(--down-soft); border-color: transparent; }
.badge--brand { color: var(--brand); background: var(--brand-soft); border-color: transparent; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Direction utilities must beat any component's own color (.theme-change,
   .candidate-table td, .breadth-grid dd, ...): semantic direction color always
   wins, hence the deliberate !important. */
.delta-up { color: var(--up) !important; }
.delta-down { color: var(--down) !important; }
.delta-flat { color: var(--flat) !important; }

.numeric, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}