/* Design tokens. Holds the values used by rules added in Nestimate (layout and the small-screen layout).
   monte-carlo.css still hard-codes its original values; moving them here is parked tech debt, tracked in status-later.md.
   CSS custom properties cannot be used inside @media conditions, so breakpoints stay literal in the rule files. */
:root {
    /* Colours, matching the page's existing palette */
    --colour-page-background: #f5f5f5;
    --colour-heading: #2c3e50;
    --colour-text-muted: #7f8c8d;
    --colour-card-background: #fafafa;

    /* Spacing and radius, matching the page's existing gaps and card corners */
    --space-section: 15px;
    --radius-card: 6px;

    /* Type */

    /* Results layout. The four charts fill the visible height of the results column:
       the viewport less the header, the column's panel padding and the panel heading (measured). */
    --charts-grid-height: calc(100vh - 145px);
    --charts-grid-min-height: 560px;

    /* Small-screen layout (small-screen.css) */
    --space-small-screen: 10px;
    --touch-target: 44px;
    --font-size-input-touch: 16px; /* 16px stops iOS zooming the page when an input is focused */
    --slider-thumb-touch: 28px;
    --slider-track-touch: 6px;
    --run-bar-height: 64px;
    --shadow-run-bar: 0 -2px 6px rgba(0, 0, 0, 0.15);
    --chart-height-small: 260px;
    --projection-height-small: 200px;
    --border-projection-heading: 1px solid #e0e0e0;
}