/* Messon Terminal · design tokens.
   Apple's own language (decisions 28-29): the system font (SF Pro on iPhone and Mac) and the iOS semantic palette,
   dark and light. One accent only, orange, for "act on this"; everything else is monochrome. Gains and losses use
   the system green and red.

   Text tokens and contrast (decision 22: small text >= 4.5:1 in both rooms):
     --ink    label
     --ink-2  body text one step down
     --ink-3  secondary text: sub-lines, tile labels, units, dates (Apple's secondaryLabel; in the light room the same
              hue at .76 alpha, because secondaryLabel's .60 is only 3.3:1 on #F2F2F7)
     --ink-4  tertiaryLabel: hairline marks, placeholders, disabled. Never for text a reader needs.
     --ink-5  quaternary: tracks and fills
   Accent text in the light room uses Apple's accessible variants (green #248A3D, red #D70015, orange #C93400); fills
   (dots, lamps, bars) use the vivid system colours through the --*-fill tokens. */

:root {
  /* the dark room */
  --bg: #000000;                 /* systemBackground */
  --bg-2: #1c1c1e;               /* secondarySystemBackground: grouped surfaces, sheets */
  --bg-3: #2c2c2e;               /* tertiarySystemBackground: elevated (cards inside sheets, selected cells) */
  --panel: var(--bg-2);          /* a grouped surface (card, group, tile) on the room's background */
  --panel-hi: rgba(118, 118, 128, 0.24);   /* tertiarySystemFill: segmented track, pressed rows, chips */
  --glass: rgba(30, 30, 32, 0.72);         /* bar material (dock, rail) */
  --glass-hi: rgba(36, 36, 38, 0.86);      /* thick material (menu, toasts, hover box) */
  --sheet-bg: #1c1c1e;                     /* sheets are opaque, like iOS */
  --line: rgba(84, 84, 88, 0.6);           /* separator */
  --line-hi: #38383a;                      /* opaqueSeparator */
  --seg-on: #636366;                       /* selected segment */
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.4);
  --ink: #ffffff;
  --ink-2: rgba(235, 235, 245, 0.78);
  --ink-3: rgba(235, 235, 245, 0.6);
  --ink-4: rgba(235, 235, 245, 0.3);
  --ink-5: rgba(235, 235, 245, 0.16);

  --up: #30d158;
  --up-fill: #30d158;
  --up-dim: rgba(48, 209, 88, 0.16);
  --down: #ff453a;
  --down-fill: #ff453a;
  --down-dim: rgba(255, 69, 58, 0.16);
  --gold: #ff9f0a;               /* the one accent (named 'gold' for history: every view uses it) */
  --gold-fill: #ff9f0a;
  --gold-dim: rgba(255, 159, 10, 0.16);
  --on-gold: #000000;            /* text on an accent fill */
  --steel: #98989d;              /* neutral: delayed, manual, the implied tick (monochrome by decision 29) */
  --steel-dim: rgba(142, 142, 147, 0.18);

  /* type: the system font. -apple-system picks SF Pro Text or Display by size on Apple devices. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --num: var(--display);         /* numbers: same family, tabular figures (base.css) */
  --code: ui-monospace, "SF Mono", Menlo, monospace;   /* ISINs, ids: the only monospace */
  /* retired faces, kept as aliases so every view picks up the system font without a rewrite */
  --serif: var(--display);
  --mono: var(--num);

  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;

  --gut: 16px;
  --gap: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);          /* expo out: arrivals */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);       /* in-out: rearrangements */
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 900ms;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  color-scheme: dark;
}

/* the light room */
:root[data-room="white"] {
  --bg: #f2f2f7;                 /* systemGroupedBackground */
  --bg-2: #ffffff;
  --bg-3: #ffffff;
  --panel: var(--bg-2);
  --panel-hi: rgba(118, 118, 128, 0.12);
  --glass: rgba(249, 249, 251, 0.78);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --sheet-bg: #f2f2f7;
  --line: rgba(60, 60, 67, 0.29);
  --line-hi: #c6c6c8;
  --seg-on: #ffffff;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.1);
  --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
  --ink: #000000;
  --ink-2: rgba(60, 60, 67, 0.88);
  --ink-3: rgba(60, 60, 67, 0.76);
  --ink-4: rgba(60, 60, 67, 0.3);
  --ink-5: rgba(60, 60, 67, 0.18);
  --up: #248a3d;
  --up-fill: #34c759;
  --up-dim: rgba(52, 199, 89, 0.14);
  --down: #d70015;
  --down-fill: #ff3b30;
  --down-dim: rgba(255, 59, 48, 0.12);
  --gold: #c93400;
  --gold-fill: #ff9500;
  --gold-dim: rgba(255, 149, 0, 0.14);
  --on-gold: #ffffff;
  --steel: #6c6c70;
  --steel-dim: rgba(142, 142, 147, 0.14);
  color-scheme: light;
}

/* Sheets, menus and toasts are one level up: what is a grouped surface on the background becomes the elevated
   surface inside them (iOS: secondarySystemGroupedBackground in a sheet). */
.sheet, .menu { --panel: var(--bg-3); }