/* ============================================================ variables.css ------------------------------------------------------------ This file defines CSS Custom Properties (also called CSS variables). Think of them like named constants in code — you write the color or font name ONCE here, then reference it everywhere else. If you ever want to change a color, you only change it in this one file. Syntax: --name: value; Usage: color: var(--color-accent); ============================================================ */ :root { /* :root targets the very top of the HTML tree (the element), so every other element on the page can inherit these variables. */ /* ── Colors ─────────────────────────────────────────────── */ --color-bg: #0d0d0d; /* Main page background */ --color-panel: #1a1a1a; /* Cards / panels */ --color-accent: #ff6b00; /* Orange highlight */ --color-green: #00c176; /* Bullish / profit */ --color-red: #ff3d3d; /* Bearish / loss */ --color-text: #ffffff; /* Primary text */ --color-text-muted: #a0a0a0; /* Secondary / dim text */ --color-border: #2a2a2a; /* Dividers & outlines */ /* ── Fonts ───────────────────────────────────────────────── */ --font-logo: 'Bebas Neue', sans-serif; /* Logo, big titles */ --font-data: 'Space Mono', monospace; /* Numbers, P&L, % */ --font-ui: 'DM Sans', sans-serif; /* All general text */ /* ── Spacing & Radius ────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; /* ── Chart Engine ────────────────────────────────────────── */ --chart-bg: #0d0e14; /* main chart canvas background */ --chart-header-bg: #141520; /* instrument/timeframe bar above chart */ --toolbar-bg: #1a1b26; /* left vertical toolbar */ --grid-line: #1e2030; /* chart grid lines */ --panel-border: #2a2d3e; /* border between chart sub-panels */ --status-bar-bg: #0f1019; /* bottom status bar */ /* ── Candles ─────────────────────────────────────────────── */ --candle-bull: #26a69a; /* bullish (up) candle */ --candle-bear: #ef5350; /* bearish (down) candle */ /* ── Chart Text ──────────────────────────────────────────── */ --text-primary: #e0e0e0; --text-muted: #9ea3b0; --text-dim: #555c7a; /* ── Indicator Color Palette ─────────────────────────────── */ --ind-1: #00BCD4; /* cyan */ --ind-2: #F06292; /* pink */ --ind-3: #FFB74D; /* amber */ --ind-4: #AB47BC; /* purple */ --ind-5: #42A5F5; /* blue */ /* ── Volume & Price ──────────────────────────────────────── */ --volume-bar: #8E24AA; /* volume histogram bars */ --price-live-bg: #ef5350; /* live price label background */ /* ── Layout ─────────────────────────────────────────────── */ /* .portal-wrapper's grid-template-columns first track: the combined width of .sidebar + .toolbar (which together make up .sidebar-col, grid column 1). Column 2 (.content-area, .stats-bar) gets the remaining 1fr, so both align to the same left edge via the grid itself. box-sizing:border-box (see reset in portal.css) means each element's 1px right border is included in its own width, not additive. Keep in sync with .sidebar's and .toolbar's widths in portal.css. */ --sidebar-toolbar-width: 284px; /* 240px sidebar + 44px toolbar */ }