/* =========================================================================
   Mustard Systems — Color & Type Tokens
   =========================================================================
   Dark-first design system. All values extracted from internal product
   screenshots or opinionated additions for the brand refresh.

   Foundation: Tailwind slate scale (matches current internal tooling).
   Accent:     mustard yellow (#E4B528) — the brand's namesake, used
               sparingly for primary actions, focus states, and KPIs.
   Trading:    back-blue / lay-pink spectrum — preserved from the
               current trader workstation (Betfair convention).
   Numbers:    JetBrains Mono with tabular figures — every price,
               size, and PnL on the system reads as code.

   Import order matters: load this file before any component CSS.
   ========================================================================= */

/* ---- Fonts -------------------------------------------------------------- */
/* Inter (display + body) and JetBrains Mono (numbers, code, jargon).
   Replace with self-hosted woff2 in production — see fonts/README.md. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ============== COLOR — NEUTRALS (Tailwind slate, slightly tuned) ====== */
  --ms-slate-950: #060912;
  --ms-slate-900: #0b1220; /* deep canvas, below cards */
  --ms-slate-850: #111827; /* MAIN canvas — matches internal tooling */
  --ms-slate-800: #1f2937; /* elevated surface — cards, panels */
  --ms-slate-750: #273344; /* hover surface */
  --ms-slate-700: #334155; /* default border */
  --ms-slate-600: #475569; /* strong border, divider */
  --ms-slate-500: #64748b; /* tertiary text, disabled */
  --ms-slate-400: #94a3b8; /* secondary text, labels */
  --ms-slate-300: #cbd5e1; /* meta text on dark */
  --ms-slate-200: #e2e8f0; /* high-emphasis muted */
  --ms-slate-100: #f1f5f9; /* primary text on dark */
  --ms-slate-50:  #f9fafb; /* maximum contrast — titles */

  /* ============== COLOR — MUSTARD (brand primary) ======================= */
  /* Sampled from the official Mustard Systems script wordmark. */
  --ms-mustard-900: #3d3300;
  --ms-mustard-800: #615100; /* the wordmark drop-shadow color */
  --ms-mustard-700: #8a7400;
  --ms-mustard-600: #c2a300; /* hover, slightly darker */
  --ms-mustard-500: #F4CC00; /* PRIMARY — brand mustard, from the logo */
  --ms-mustard-400: #ffd933;
  --ms-mustard-300: #ffe366;
  --ms-mustard-200: #ffee99;
  --ms-mustard-100: #fff8cc;

  /* ============== COLOR — TRADING (back / lay / position) =============== */
  /* Back (buying) — blue spectrum. Light → dark = far → close to best. */
  --ms-back-100: #cfe3ff;  /* 3 levels out */
  --ms-back-200: #8bbaf2;  /* 2 levels out */
  --ms-back-300: #4d92e6;  /* best back */
  --ms-back-fg:  #0a1a2f;  /* fg on back cells */
  --ms-back-bg-dark-100: #1a2d44;  /* dark mode 3 out */
  --ms-back-bg-dark-200: #20436e;  /* dark mode 2 out */
  --ms-back-bg-dark-300: #2a64a8;  /* dark mode best */

  /* Lay (selling) — pink/magenta spectrum. */
  --ms-lay-100:  #ffd1e0;
  --ms-lay-200:  #f094b6;
  --ms-lay-300:  #e25c8c;
  --ms-lay-fg:   #2a0a18;
  --ms-lay-bg-dark-100: #3d1b29;
  --ms-lay-bg-dark-200: #6b2545;
  --ms-lay-bg-dark-300: #a23566;

  /* Position / PnL */
  --ms-pos-500:  #34d399; /* green, profit */
  --ms-pos-700:  #047857;
  --ms-neg-500:  #f87171; /* red, loss */
  --ms-neg-700:  #b91c1c;

  /* ============== COLOR — SEMANTIC STATUS =============================== */
  --ms-info-500:    #60a5fa; /* link / info */
  --ms-info-300:    #93c5fd; /* link on dark, matches internal tooling */
  --ms-success-500: #22c55e;
  --ms-warn-500:    #f59e0b;
  --ms-danger-500:  #ef4444;

  /* ============== COLOR — LIGHT MODE (rare; ops/print) =================== */
  --ms-light-canvas: #f7f6f0; /* warm off-white */
  --ms-light-surface: #ffffff;
  --ms-light-border: #d8d6cc;
  --ms-light-text: #11151c;
  --ms-light-text-muted: #5b6473;

  /* ============== SEMANTIC ALIASES — USE THESE IN COMPONENTS ============ */
  --bg-canvas:     var(--ms-slate-850);
  --bg-sunken:     var(--ms-slate-900);
  --bg-elevated:   var(--ms-slate-800);
  --bg-hover:      var(--ms-slate-750);
  --bg-selected:   color-mix(in oklab, var(--ms-mustard-500) 14%, var(--ms-slate-800));

  --fg-primary:    var(--ms-slate-50);
  --fg-secondary:  var(--ms-slate-300);
  --fg-tertiary:   var(--ms-slate-400);
  --fg-muted:      var(--ms-slate-500);
  --fg-disabled:   var(--ms-slate-600);
  --fg-on-mustard: #2a2300; /* dark olive-ink, matches the wordmark shadow */
  --fg-link:       var(--ms-info-300);
  --fg-link-hover: var(--ms-info-500);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: var(--ms-slate-700);
  --border-strong:  var(--ms-slate-600);
  --border-focus:   var(--ms-mustard-500);

  --accent:         var(--ms-mustard-500);
  --accent-hover:   var(--ms-mustard-400);
  --accent-press:   var(--ms-mustard-600);

  /* ============== TYPOGRAPHY — FAMILIES ================================ */
  --ms-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ms-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  /* Display = Inter at heavier weights with tight tracking */
  --ms-font-display: 'Inter', -apple-system, system-ui, sans-serif;

  /* ============== TYPOGRAPHY — SCALE (modular, base 14px) ============== */
  /* Mustard runs dense: base 14px. UIs hit 13px for tables/ladders.    */
  --fs-3xs:  10px; /* corner labels, mono micro */
  --fs-2xs:  11px; /* badges, tags, all-caps section headers */
  --fs-xs:   12px; /* dense table cells, footnotes */
  --fs-sm:   13px; /* trader ladder cells, dense controls */
  --fs-base: 14px; /* BODY DEFAULT */
  --fs-md:   15px; /* main UI text where breathing room is wanted */
  --fs-lg:   17px; /* lead paragraph */
  --fs-xl:   20px; /* h4 / strong inline header */
  --fs-2xl:  24px; /* h3 / card title */
  --fs-3xl:  30px; /* h2 / section header */
  --fs-4xl:  40px; /* h1 / page title */
  --fs-5xl:  56px; /* display / hero */
  --fs-6xl:  80px; /* mega display, KPI numbers on deck slides */

  /* Line heights — short for UI, taller for prose */
  --lh-tight:   1.1;   /* display, KPIs */
  --lh-snug:    1.25;  /* headers */
  --lh-normal:  1.4;   /* UI / dense text */
  --lh-relaxed: 1.55;  /* body prose */
  --lh-loose:   1.7;   /* long-form */

  /* Letter spacing — Inter benefits from negative tracking at display sizes */
  --ls-tightest: -0.03em;
  --ls-tight:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-wider:    0.06em;  /* small caps section headers */
  --ls-widest:   0.12em;  /* all-caps labels */

  /* ============== SPACING — 4px base =================================== */
  --sp-0:  0px;
  --sp-px: 1px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* Gutters — tight for trader UI, generous for marketing/docs */
  --gutter-dense:  var(--sp-3);
  --gutter-base:   var(--sp-5);
  --gutter-roomy:  var(--sp-8);

  /* ============== RADIUS — SHARP-EDGED, MOSTLY ========================== */
  /* The brand reads "exchange / terminal", not "consumer app".
     Default to 4px; cards lift to 6px; pills stay 999.  */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ============== ELEVATION (dark mode — borders carry the weight) ===== */
  /* Shadows are subtle on dark UI. Most "lift" is achieved by a 1px
     border-subtle plus a +50 brightness step on the surface.            */
  --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2: 0 1px 0 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.4);
  --shadow-3: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 12px 40px rgba(0,0,0,0.5);
  --shadow-glow-accent: 0 0 0 1px var(--ms-mustard-500), 0 0 24px -4px rgba(244,204,0,0.45);
  --shadow-focus-ring:  0 0 0 2px var(--ms-slate-850), 0 0 0 4px var(--ms-mustard-500);

  /* ============== MOTION =============================================== */
  /* Bias: fast, mechanical, no bounce. Trader tools should feel like
     keyboard input, not a consumer app.                                 */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.7, -0.05, 0.3, 1.05); /* minimal overshoot */
  --dur-instant: 50ms;
  --dur-quick:   120ms; /* hover, focus, toggle */
  --dur-base:    180ms; /* drawer open, tab change */
  --dur-slow:    320ms; /* modal, full-page transitions */

  /* ============== LAYOUT =============================================== */
  --layout-max:        1440px;
  --layout-deck-w:     1920px;
  --layout-deck-h:     1080px;
  --sidebar-w:         240px;
  --topbar-h:          48px;
  --row-h-dense:       28px; /* trader ladder row */
  --row-h-base:        36px; /* most tables */
  --row-h-roomy:       44px; /* form rows */

  /* z-index */
  --z-base:    0;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;
}

/* =========================================================================
   GLOBAL RESET + DEFAULTS
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--ms-font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Inter alternates: straight i/l, lowercase a */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   SEMANTIC TYPE — apply with classes or element selectors
   ========================================================================= */

h1, .ms-h1 {
  font-family: var(--ms-font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}

h2, .ms-h2 {
  font-family: var(--ms-font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}

h3, .ms-h3 {
  font-family: var(--ms-font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}

h4, .ms-h4 {
  font-family: var(--ms-font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0;
}

p, .ms-p {
  font-family: var(--ms-font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  margin: 0;
  text-wrap: pretty;
}

.ms-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

/* Section label — uppercase, mustard-tinted gray, like the internal product */
.ms-section-label,
.ms-eyebrow {
  font-family: var(--ms-font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Mono / code / numbers */
code,
kbd,
samp,
pre,
.ms-mono {
  font-family: var(--ms-font-mono);
  font-feature-settings: 'zero', 'ss01'; /* slashed zero */
  font-variant-numeric: tabular-nums;
}

.ms-num {
  font-family: var(--ms-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'zero';
}

/* Inline code — like the internal tool: blue text, no pill background */
:not(pre) > code {
  font-size: 0.92em;
  color: var(--fg-link);
  background: transparent;
  padding: 0;
}

/* Trader jargon: lowercase mono with `=` config strings (e.g. risk=5k) */
.ms-jargon {
  font-family: var(--ms-font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-tertiary);
  text-transform: lowercase;
}

/* Links — slightly desaturated blue, matches mordor-client */
a, .ms-link {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-out);
}
a:hover, .ms-link:hover {
  color: var(--fg-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Focus — mustard ring, 2px offset on slate */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--r-sm);
}

/* Selection — subtle mustard */
::selection {
  background: color-mix(in oklab, var(--ms-mustard-500) 35%, transparent);
  color: var(--fg-primary);
}

/* Scrollbar — slim, slate */
* { scrollbar-width: thin; scrollbar-color: var(--ms-slate-700) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ms-slate-700); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--ms-slate-600); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Tabular figure helper for any element */
.ms-tnum { font-variant-numeric: tabular-nums slashed-zero; }