:root {
    /* Colors - matches the chart's own TradingView-style dark palette
       (chartConfig.js: background #131722, upColor #26a69a, downColor
       #ef5350) instead of an unrelated neutral gray, so the surrounding
       chrome (top bar, panels, popups) reads as one continuous surface
       with the chart rather than two different apps stitched together.
       TP/SL price-line colors (drawing.js, lineHoverPopup.js) and the
       "danger"/"success" button tints throughout components/*.css were
       aligned to this same up/down green-red for the same reason. */
    --color-bg: #131722;
    --color-panel: #1e222d;
    --color-panel-2: #242833;
    --color-border: #2a2e39;
    --color-accent: #2962ff;
    --color-text: #d1d4dc;
    --color-text-dim: #868993;
    --color-up: #26a69a;
    --color-down: #ef5350;

    /* Soft-neumorphic surface: one shade lighter than --color-bg, paired
       with a dual box-shadow (dark down-right, faint light up-left) that
       reads as a slab gently raised off the page instead of a bordered
       flat rectangle - see the icon-workshop mockup's "I" direction, first
       applied to the 4 drawing-panel icons, now the app-wide default for
       .btn/.top-bar-group/.chart-controls etc. Each tool/section still
       carries its own identity via icon/text color, not the tile itself,
       so nothing goes back to looking like a pastel-tinted wash. */
    --color-raised: #1a1e28;
    --shadow-raised: 3px 3px 7px rgba(0, 0, 0, 0.32), -2px -2px 4px rgba(255, 255, 255, 0.025);
    --shadow-raised-hover: 3px 3px 7px rgba(0, 0, 0, 0.32), -2px -2px 4px rgba(255, 255, 255, 0.05);
    --shadow-inset: inset 2px 2px 4px rgba(0, 0, 0, 0.35), inset -1px -1px 2px rgba(255, 255, 255, 0.02);

    /* Spacing */
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;

    /* Radius */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 14px;

    /* Z-index layers */
    --z-base: 1;
    --z-overlay: 10;
    --z-controls: 9999;

    /* Fonts - the OS's own UI font stack, the same approach TradingView's
       own site uses, rather than a webfont this app would need to load
       (and that would otherwise silently fall back to it anyway, since
       "Inter" here was never actually loaded via @font-face/Google Fonts -
       every visitor was already rendering the fallback, just without the
       intentional native-first ordering). Numbers (prices, risk/margin)
       get tabular-nums globally (base.css) so digit columns line up. */
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}