/* The redesign's values, in one place.
 *
 * Taken from the mockup in "dio_fibo ne designe": the inline styles there are
 * the source of truth for colour, radius and control height, and
 * tests/test_design_tokens.py pins them so an edit cannot quietly drift.
 *
 * Light only. The mockup defines no dark variant, and inventing one here would
 * mean inventing colours nobody designed; a dark theme is its own piece of
 * work, and a half-guessed one reads worse than none.
 */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --surface-sunken: #F8F9FB;
  --surface-hover: #FAFAFB;
  --surface-nav-hover: #F1F2F5;
  --surface-row-hover: #F7F8FF;
  --surface-inverse: #0D1117;

  /* Accent */
  --accent: #3B3FD8;
  --accent-hover: #2A2DA8;
  --accent-tint: #EEF0FF;
  --accent-ring: #E3E5FF;

  /* Text, strongest to faintest */
  --text: #0D1117;
  --text-body: #1F2430;
  --text-muted: #3A404C;
  --text-subtle: #4A5160;
  --text-faint: #5B6270;
  /* The label grey. It is the most used colour in the mockups by some
   * distance, and it is not the same as the table header's #5B6270. */
  --text-label: #6B7280;
  --text-inverse: #FFFFFF;
  /* Muted text on the inverted card. --text-faint is 3.09:1 there,
   * which is below AA; this is 9.09:1. */
  --text-inverse-muted: #AEB4C0;

  /* Lines */
  --border: #DADDE3;
  --border-soft: #E5E7EB;
  --border-faint: #EEF0F3;
  --border-strong: #B9BEC8;

  /* States, read out of the mockups' inline styles rather than approximated
   * from their screenshots. Each has three jobs and three values: the text on
   * its tint, the tint itself, and the small dot that marks a status. */
  --danger: #A8360A;
  --danger-tint: #FDECE4;
  --positive: #0B6B42;
  --positive-tint: #E7F6EE;
  --positive-dot: #12A15E;
  /* The mockup uses a lighter green for a figure in a table than for
   * text on the positive tint. */
  --positive-figure: #0B7A4B;
  --warning: #7A4A00;
  --warning-tint: #FFF4DB;
  --warning-dot: #D97706;
  /* A number that is not an error but is not fine either, like a history
   * shorter than the 180 days a backtest needs. */
  --warning-strong: #8A5300;

  /* Type. Geist comes from Google Fonts; the mono face carries every number so
   * columns of figures line up, which is why it is tabular. */
  --font-sans: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii and control heights, as measured in the mockup */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;        /* cards, measured in the mockup */
  --radius-chip: 6px;      /* the small square-ish chip, not a pill */
  --control-sm: 34px;
  --control-md: 40px;
  --control-tab: 44px;

  /* Spacing, from the mockup's 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* The mockup's cards carry no shadow at all: they are separated by their
   * border against the page, nothing else. */
  --shadow-card: none;
  --shadow-pop: 0 8px 24px rgba(13, 17, 23, 0.12);
  --sidebar-width: 248px;

  /* The inverted surfaces these rules share with the login aside and the
   * statistics pane. The same values already appear as literals inside those
   * rules; naming them here is the first step of pulling them out. */
  --text-inverse-faint: #A9B0BC;
  --positive-inverse: #5EE0A1;
  --danger-inverse: #FF9A7A;
  --danger-inverse-tint: rgba(255, 154, 122, 0.14);

  /* The run-progress panel. It is a dark card on a light page by design -
   * the one thing on the dashboard that is happening right now - so it
   * carries its own surfaces and its own accent, taken from the mockup.
   * --surface-inverse, --positive-inverse and --text-inverse-faint above are
   * the same values and are reused rather than restated. */
  --run-accent: #7B7FF0;
  --run-tile: #161B24;
  --run-track: #1F2531;
  --run-stage-active: #1A2030;
  --run-badge: #262D3A;
  --run-cell-ring: #2C3342;
  --run-border: #3A4252;
  --run-label: #8A92A0;
  --run-pct: #C9CED6;
  --run-bright: #E3E6EB;
  --run-mono-dim: #6E7684;
  /* A symbol that finished, that made the whitelist, and one kept out for
   * thin history: the mosaic's three outcomes. */
  --run-cell-done: #59627A;
  --run-cell-skip: #C98A2E;
  --run-skip-text: #E7B568;
  --run-skip-tint: rgba(201, 138, 46, 0.18);
  --run-shadow: 0 12px 32px rgba(13, 17, 23, 0.18);
}