/* TrenchBrain design tokens.

   Every colour, type size, radius, shadow, height and timing the pages use
   is named here once. Components read tokens, pages compose components, so a
   change here reaches every page. Values are the compact sizes, tuned for a
   laptop: the sheet shows as much as it can without feeling cramped. */

:root {
  color-scheme: dark;

  /* ───────── Type ───────── */
  --font: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-2xs: 10.5px; /* the smallest counts */
  --text-xs: 11px; /* axis labels, keys */
  --text-sm: 11.5px; /* chips, meta */
  --text-md: 12px; /* secondary lines, notes */
  --text-base: 12.5px; /* controls, labels, small body */
  --text-body: 13px; /* body, rows */
  --text-lg: 13.5px; /* conversation, emphasised body */
  --text-xl: 14px; /* card titles, lead text */
  --text-headline: 15.5px; /* a post quoted as a headline */
  --text-title: 18px; /* the subject of a card */
  --text-page: 20px; /* page titles */
  --text-figure: 22px; /* big numbers */
  --text-display: 26px; /* the one number a card is about */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 550;
  --weight-bold: 600;
  --tracking: -0.01em;

  /* ───────── Colour: the frame, around the sheet ───────── */
  --frame: #0b0b0c;
  --frame-hover: #19191c;
  --frame-active: #242428;
  --frame-line: rgb(255 255 255 / 7%);
  --frame-text: #a4a4aa;
  --frame-strong: #f4f4f5;
  --frame-muted: #85858d;

  /* ───────── Colour: the sheet and what sits on it ───────── */
  --sheet: #121214;
  --surface: #17171a; /* cards */
  --surface-2: #1d1d21;
  --subtle: #141417; /* a card's head or foot */
  --muted: #202024;
  --well: #0e0e10; /* sunken: fields, segmented controls */
  --popover: #1c1c1f; /* menus */
  --hover: rgb(255 255 255 / 2.5%);
  --line: rgb(255 255 255 / 8%);
  --line-soft: rgb(255 255 255 / 5.5%);

  --ink: #f4f4f5;
  --ink-2: #a9a9b1;
  /* Quiet text: at least 4.5:1 on every surface above and on a card's raised well (#202024, Ask's next-question
     strip), the lightest one it sits on. */
  --ink-3: #878790;
  --ink-4: #87878f;

  /* One accent for acting and choosing. */
  --accent: #3b7bf6;
  --accent-ink: #8fb4ff;
  --accent-soft: rgb(59 123 246 / 13%);
  --accent-line: rgb(96 150 255 / 32%);

  /* Colour is information: price up and down, people, peaks and problems. */
  --up: #12b76a;
  --up-ink: #12b76a;
  --up-soft: rgb(18 183 106 / 12%);
  --down: #ff6485;
  --down-ink: #ff6485;
  --down-soft: rgb(255 100 133 / 12%);
  --amber: #f3b64e;
  --amber-ink: #f6c872;
  --amber-soft: rgb(243 182 78 / 12%);
  --orange: #f08a3e;
  --orange-ink: #f6a56a;
  --orange-soft: rgb(240 138 62 / 12%);
  --violet: #9585ff;
  --violet-ink: #b4a8ff;
  --violet-soft: rgb(139 124 246 / 14%);
  --violet-line: rgb(149 133 255 / 34%);
  --whop: #fa4616;

  /* ───────── Shape ───────── */
  --r-sheet: 16px;
  --r-card: 12px;
  --r-control: 8px;
  --r-chip: 6px;
  --r-pill: 999px;

  /* ───────── Depth ───────── */
  --sh-card: 0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / 30%), 0 6px 16px -10px rgb(0 0 0 / 60%);
  --sh-pop: 0 0 0 1px rgb(255 255 255 / 9%), inset 0 1px 0 rgb(255 255 255 / 5%), 0 18px 40px -10px rgb(0 0 0 / 75%);
  --sh-float: 0 0 0 1px rgb(255 255 255 / 9%), 0 2px 6px rgb(0 0 0 / 35%), 0 20px 44px -12px rgb(0 0 0 / 80%);
  /* A raised control: secondary buttons, button groups, the alerts button. */
  --raised: linear-gradient(180deg, #25252a 0%, #1e1e22 100%);
  --raised-hover: linear-gradient(180deg, #2b2b30 0%, #232328 100%);
  --sh-raised: inset 0 1px 0 rgb(255 255 255 / 6%), 0 0 0 1px rgb(255 255 255 / 8%), 0 1px 2px rgb(0 0 0 / 45%);
  /* The chosen segment in a segmented control. */
  --selected: linear-gradient(180deg, #2a2a2f 0%, #232327 100%);
  --sh-selected: inset 0 1px 0 rgb(255 255 255 / 6%), 0 0 0 1px rgb(255 255 255 / 7%), 0 1px 3px rgb(0 0 0 / 50%);
  /* Frosted glass that floats over the page: the header, the ask bar. */
  --glass: rgb(28 28 32 / 92%);
  --glass-blur: blur(14px) saturate(1.2);

  /* ───────── Controls ───────── */
  --control-h: 30px;
  --control-h-sm: 28px;
  --control-h-xs: 26px;
  --control-h-lg: 40px;
  --control-h-bar: 32px; /* controls in the header */
  --control-font: var(--weight-strong) var(--text-base) / 1 var(--font);
  --seg-h: 24px;
  --chip-h: 20px;
  --count-h: 20px;
  --tag-h: 22px; /* a name badge in text */
  --tag-h-sm: 19px;

  /* ───────── Layout ───────── */
  --sb-w: 248px;
  --sb-w-collapsed: 68px;
  --hdr-h: 52px;
  --sheet-gap: 8px; /* between the sheet and the window */
  --page-max: 1640px;
  --page-pad-top: 16px;
  --page-pad-x: 24px;
  --section-gap: 20px;
  --row-h: 48px;

  /* ───────── Motion ───────── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --glide: cubic-bezier(0.32, 0.72, 0, 1);

  /* ───────── Layers ───────── */
  --z-header: 10;
  --z-askbar: 20;
  --z-panel: 25; /* the floating panel on the right of the sheet */
  --z-chat: 30;
  --z-dialog: 50;
  --z-toast: 60; /* over dialogs, so what a dialog did can say so */
  --z-menu: 70;
  --z-drawer: 80;
  --z-skip: 100;
}