/* MAS_Trader Design System — single source of truth for type + color.
 *
 * Canonicalized from frontend/src/designTokens.js (Phase 6.0.2,
 * Gemini UX authority) + frontend/src/index.css. Where the two diverge,
 * designTokens.js wins.
 */

/* ---------- FONTS ---------- */
/* Google Fonts substitutes for the codebase's Inter + JetBrains Mono.
 * Swap these @import rules out for self-hosted TTFs when available. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ========== BACKGROUND LAYERS (deep → elevated) ========== */
  --bg-base:       #0a0e14;  /* page background */
  --bg-elevated:   #111722;  /* card background */
  --bg-inset:      #1a2230;  /* input / inset well */
  --bg-hover:      #1f2938;  /* row hover, selected fill */

  /* Legacy index.css synonyms — kept for components that still use them */
  --bg:             var(--bg-base);
  --surface:        var(--bg-elevated);
  --surface-hover:  var(--bg-hover);

  /* ========== BORDERS ========== */
  --border-subtle:   #1f2938;
  --border-default:  #2a3548;
  --border-emphasis: #3d4c66;

  /* Legacy synonyms */
  --border:         var(--border-default);
  --border-strong:  var(--border-emphasis);

  /* ========== TEXT TIERS ========== */
  --text-primary:   #e5edf5;
  --text-secondary: #9aa8b8;
  --text-muted:     #5e6b7e;
  --text-disabled:  #3d4c66;

  /* ========== TRADE ACTIONS (semantic, neon) ========== */
  --action-buy:        #2ed3a3;
  --action-buy-muted:  #1a7a60;
  --action-hold:       #f5a623;
  --action-hold-muted: #8a5c13;
  --action-pass:       #6b7890;
  --action-pass-muted: #404855;
  --action-sell:       #ff6b6b;
  --action-sell-muted: #8a3a3a;
  --action-close:      #ff6b6b;

  /* ========== SYSTEM STATES ========== */
  --status-healthy:  #2ed3a3;
  --status-warning:  #f5a623;
  --status-critical: #ff6b6b;
  --status-idle:     #5e6b7e;
  --status-active:   #4fa3ff;

  /* ========== P&L (shares palette with actions) ========== */
  --pnl-positive: #2ed3a3;
  --pnl-negative: #ff6b6b;
  --pnl-neutral:  #9aa8b8;

  /* ========== CHART (Recharts equity curve) ========== */
  --chart-line:             #4fa3ff;
  --chart-area-top:         rgba(79, 163, 255, 0.15);
  --chart-area-bottom:      rgba(79, 163, 255, 0);
  --chart-grid:             #1f2938;
  --chart-axis:             #5e6b7e;
  --chart-crosshair:        #9aa8b8;

  /* ========== AGENT TINTS (source_agent labels) ========== */
  --agent-scout:        #5eead4;  /* cyan */
  --agent-analyst:      #f5a623;  /* amber */
  --agent-watchdog:     #a78bfa;  /* purple */
  --agent-risk:         #4fa3ff;  /* blue */
  --agent-executioner:  #2ed3a3;  /* green */
  --agent-orchestrator: #9aa8b8;
  --agent-newsreader:   #9aa8b8;

  /* Legacy hue shortcuts used by older components */
  --green:  #10b981;
  --red:    #ef4444;
  --blue:   #3b82f6;
  --amber:  #f59e0b;
  --purple: #8b5cf6;

  /* ========== TYPOGRAPHY ========== */
  --font-sans: 'Inter', 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --size-xs:   0.75rem;    /* 12px — badge text, timestamps */
  --size-sm:   0.875rem;   /* 14px — body, table cells */
  --size-base: 1rem;       /* 16px — rare in-UI, default body */
  --size-lg:   1.25rem;    /* 20px — pnl line in Crown */
  --size-xl:   1.75rem;    /* 28px */
  --size-2xl:  2.5rem;     /* 40px — the hero equity number */
  --size-3xl:  3.5rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* ========== SPACING (4px rhythm) ========== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;  /* card padding */
  --space-6: 24px;
  --space-8: 32px;

  /* ========== RADII ========== */
  --radius-sm:   4px;   /* pills, badges, small buttons */
  --radius-md:   8px;
  --radius-lg:   12px;  /* cards */

  /* ========== ELEVATION ========== */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);

  /* ========== MOTION ========== */
  --motion-flash-duration: 1000ms;
  --motion-flash-easing:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-pulse-duration: 2000ms;
  --motion-panel-duration: 150ms;
  --motion-panel-easing:   cubic-bezier(0.4, 0, 0.2, 1);
  --motion-hover-duration: 100ms;

  /* ========== LAYOUT ========== */
  --crown-height:   96px;
  --column-gap:     16px;
  --card-padding:   20px;
  --card-radius:    12px;
}

/* ========== SEMANTIC TYPOGRAPHY ========== */

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--leading-normal);
}

/* The subtle dot grid that shows through between panels */
body.mas-grid {
  background-image: radial-gradient(circle, rgba(30, 30, 46, 0.4) 1px, transparent 1px);
  background-size: 24px 24px;
}

.mas-h1,
h1.mas {
  font-family: var(--font-mono);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.mas-h2,
h2.mas {
  font-family: var(--font-sans);
  font-size: var(--size-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.mas-h3,
h3.mas {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

/* UPPERCASE tracking-widest label — the system's workhorse header */
.mas-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mas-label-sm {
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* Body copy */
.mas-p {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

/* Secondary / muted inline copy */
.mas-p-muted {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  color: var(--text-secondary);
}

/* Monospace data cell — the system's most common style */
.mas-data {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.mas-data-sm {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Inline code / ticker */
code.mas,
.mas-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-inset);
  color: var(--text-primary);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

/* The hero number in the Performance Crown */
.mas-hero {
  font-family: var(--font-mono);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}