/* Margin design tokens and base typography — the "Light" theme. css/themes.css redefines the same tokens for
   "Medium" and "Dark". Every colour comes from the Margin brand palette:
   Ink #111113 · Graphite #26262A · Slate #55555C · Ash #A1A1AA · Fog #E4E4E7 · Paper #FAFAFA,
   the Mist (#F7F7F8 → #DCDCE0) and Graphite (#26262A → #0C0C0E) gradients, the in-between neutrals of the
   brand boards, and Profit #15803D / Loss #B91C1C, which only ever report a result. */
:root {
  --ink: #111113;
  --ink-2: #26262A;
  --ink-3: #4A4A52;
  --muted: #55555C;
  --faint: #5D5D65;
  --soft-voice: #6B6B73;     /* the light second voice in headings */
  --line: #D4D4D8;
  --line-soft: #E4E4E7;
  --line-strong: #111113;

  --paper: #F4F4F5;
  --paper-hi: #FAFAFA;
  --paper-lo: #E4E4E7;
  --card: #FFFFFF;

  --night: #0C0C0E;
  --night-2: #111113;
  --night-3: #26262A;
  --night-line: #2E2E33;
  --night-fg: #F4F4F5;
  --night-muted: #A1A1AA;
  --night-faint: #8E8E96;

  --gain: #15803D;
  --loss: #B91C1C;
  --gain-soft: color-mix(in srgb, #15803D 12%, #FFFFFF);
  --loss-soft: color-mix(in srgb, #B91C1C 10%, #FFFFFF);
  --gain-night: #15803D;
  --loss-night: #B91C1C;

  --on-ink: #F4F4F5;          /* text on ink-filled buttons, chips and selections */
  --hover: rgba(17,17,19,.06);
  --backdrop: rgba(17,17,19,.45);

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One typeface everywhere; numbers use tabular figures so columns still line up. */
  --mono: var(--sans);

  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --radius-btn: 10px;     /* every button: a soft, even rounding */

  /* Surfaces are lifted by a hairline edge and a soft, low shadow rather than a heavy drop. */
  --edge: inset 0 0 0 1px rgba(17,17,19,.06);
  --shadow-chip: 0 1px 2px rgba(17,17,19,.05), 0 4px 14px -8px rgba(17,17,19,.14);
  --shadow-card: 0 1px 2px rgba(17,17,19,.04), 0 12px 32px -20px rgba(17,17,19,.18);

  /* Motion: strong ease-out for things that arrive, ease-in-out for things that move on screen. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-night: 0 30px 60px -26px rgba(17,17,19,.5);
  --shadow-deep: 0 40px 90px -30px rgba(17,17,19,.45), 0 12px 24px -12px rgba(17,17,19,.25);
  --shadow-button: 0 12px 30px -10px rgba(17,17,19,.35);

  --grad-page: linear-gradient(180deg, #F7F7F8 0%, #DCDCE0 100%);
  --grad-ink: linear-gradient(180deg, #26262A 0%, #111113 100%);
  --grad-ink-strong: linear-gradient(180deg, #2E2E33 0%, #111113 100%);
  --grad-card: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
  --grad-night: linear-gradient(160deg, #26262A 0%, #0C0C0E 75%);
  --grad-night-card: linear-gradient(160deg, #26262A 0%, #0C0C0E 75%);
  --grad-text: linear-gradient(180deg, #0C0C0E 35%, #6B6B73 100%);
  --grad-text-soft: linear-gradient(180deg, #6B6B73 0%, #A1A1AA 100%);

  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Margin type: one family, two voices — ExtraBold 800 headlines, Regular 400 body. */
h1, h2, h3 { margin: 0; font-weight: 800; text-wrap: balance; }
/* Tracking tightens as type grows: large headings close up, small text stays open. */
h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -0.035em; }
h3 { font-size: 17px; letter-spacing: -0.015em; }

/* The quiet second voice inside a headline. */
.soft {
  font-weight: 400;
  padding-right: 0.04em;
  color: var(--soft-voice);
}
.solid {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }
.muted { color: var(--muted); }

.night .gain { color: var(--gain-night); }
.night .loss { color: var(--loss-night); }

/* Figures that js/fit.js shrinks to fit their box: one line, never wider than the box. */
.kpi .value, .js-cell .value, .strat-kpis b, .acct-figs b, .score-total b, .nb-trade-figs b, .pnl-preview .figure,
.session .pnl, .day .amount, .month-summary b, .mp-v, .plan-figure {
  display: block;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

/* Panels that scroll up and down (dialogs, drawers, dropdown lists, the editor, the sidebar) do so without a visible
   bar and never sideways; their content is sized to fit. The page itself and the journal table keep their bars. */
.sheet, .reader, .drawer-body, .editor-body, .tp-col, .select-list, .zone-list, .nb-notes, .sidebar, .menu {
  scrollbar-width: none;
  overflow-x: hidden;
}
.sheet::-webkit-scrollbar, .reader::-webkit-scrollbar, .drawer-body::-webkit-scrollbar, .editor-body::-webkit-scrollbar,
.tp-col::-webkit-scrollbar, .select-list::-webkit-scrollbar, .zone-list::-webkit-scrollbar, .nb-notes::-webkit-scrollbar,
.sidebar::-webkit-scrollbar, .menu::-webkit-scrollbar { display: none; }