/* Theme tokens — ported from DMS Fastgraph (dms/ui/style_tokens.py). Theme is set as data-theme on ; default dark. :root is the dark theme so a document with no data-theme still paints correctly. */ :root { /* surfaces */ --bg: #07090C; --viewport: #0C1015; --panel: #121820; --raised: #18212B; --control: #1E2833; --control-hover: #293847; --alternate: #10161D; /* type */ --text: #E3E7EE; --muted: #91A2BA; --disabled: #6E7785; /* lines and states */ --border: #334152; --selected: #203B50; --accent: #66CCFF; --danger: #F0A0A0; --positive: #9DEAB5; --warning: #FFDCA1; /* plot */ --plot-bg: #1A1A1A; --plot-fg: #AAB0B9; --plot-grid: #555D68; /* fonts */ --ui: 'Inter', 'Helvetica Neue', Arial, sans-serif; --tech: 'Inconsolata', Menlo, monospace; /* button recipe: recessed well + face, from dms/ui/modern_button.py. Face = viewport mixed 58% toward black. */ --btn-face: #050709; --btn-edge: #050607; --btn-well-a: rgba(1, 3, 4, 0.93); --btn-well-b: rgba(0, 0, 0, 0.86); --btn-ring: #151C25; /* aliases used by js/graph.js and js/sweep.js */ --ink: var(--text); --mute: var(--plot-fg); --faint: var(--plot-fg); --hair: var(--plot-grid); --hair2: var(--plot-grid); --ghost: rgba(227, 231, 238, 0.28); --playhead: rgba(227, 231, 238, 0.55); --sans: var(--ui); --mono: var(--tech); color-scheme: dark; } :root[data-theme="light"] { --bg: #F3F5F8; --viewport: #FFFFFF; --panel: #F8FAFC; --raised: #FFFFFF; --control: #E8ECF1; --control-hover: #DCE3EB; --alternate: #E9EDF2; --text: #20252D; --muted: #5F6977; --disabled: #99A1AC; --border: #B9C1CC; --selected: #CFE4F6; --accent: #176EA6; --danger: #8A2525; --positive: #176B37; --warning: #764D00; --plot-bg: #FAFBFC; --plot-fg: #4F5967; --plot-grid: #AEB7C2; /* Light face = control mixed 18% toward black (modern_button._surface_and_text). */ --btn-face: #BEC2C6; --btn-edge: #AAAFB5; --btn-well-a: rgba(83, 97, 116, 0.30); --btn-well-b: rgba(83, 97, 116, 0.18); --btn-ring: #DCE2EA; --ghost: rgba(32, 37, 45, 0.28); --playhead: rgba(32, 37, 45, 0.55); color-scheme: light; }