/* ============================================================================ TradeSeq — DESIGN TOKENS TradeSeq Cockpit is a control room for many trading accounts at once. It is built like an instrument panel: a cool, quiet, light ground carries the register of accounts; one deep navy field carries the machine that acts on them; one controlled blue means "this is the instrument speaking". The navy (#0b1527) carries the console and the Advanced Engine. The brand's own colours are the symbol's graphite and its blue face, sampled into --tradeseq-blue, which is also the product's instrument blue. COLOUR HAS TWO JOBS AND THEY NEVER MIX brand navy + blue — identity, instrument, selection, links semantic green settled · amber attention · red real consequence Red is never decorative and never ambient. A red FIELD means money is being removed from the market right now. Healthy live copying is marked, never alarmed. ========================================================================= */ :root{ /* ---- ground: cool light neutrals, four steps ---- */ --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef1f6; --surface-3:#e3e8ef; /* ---- ink: the logo navy, five stops, all AA on the ground ---- */ --ink:#0b1527; --ink-2:#2b3648; --ink-3:#5a6678; --ink-4:#616d81; --ink-5:#aab4c4; /* LINE tone: rings, ticks, tracks. never text. */ /* ---- rules: ink at low opacity, never a flat grey ---- */ --line:rgba(11,21,39,.08); --line-2:rgba(11,21,39,.15); --line-3:rgba(11,21,39,.30); /* text on an ink-filled control, and the brightest surface in the theme */ --on-ink:#ffffff; --white:#ffffff; --scrim:rgba(11,21,39,.36); --tint:rgba(11,21,39,.04); /* a hover, a hairline wash */ /* ---- TradeSeq blue: the brand, and the instrument ---- Sampled from the logo artwork (median of its blue face). "Seq" in the wordmark, the selected rail item, links, focus, the moving light. */ --tradeseq-blue:#0164fd; --tradeseq-blue-light:#5fa8ff; --tradeseq-ink:#0f1114; /* the symbol's graphite */ --blue-900:#12336f; --blue:var(--tradeseq-blue); --blue-400:#5b93fe; --blue-100:#c9dcff; --blue-50:#eaf1ff; /* ---- settled: filled, healthy, in profit ---- */ --green-900:#0a4a35; --green:#0e7a56; --green-400:#35a97f; --green-50:#e4f4ed; /* ---- attention: working, held, near a limit ---- */ --amber-900:#6b4507; --amber:#94620a; --amber-400:#d09a2c; --amber-50:#fbf0d9; /* ---- real consequence only ---- */ --red-900:#8c231c; --red:#c0342a; --red-400:#e0685a; --red-50:#fceceb; --red-fill:#c0342a; /* a filled danger control: white text sits on this */ --violet:#5a4fcf; --violet-50:#ebe9fb; --violet-fill:#5a4fcf; /* a filled copy-mode chip: white text sits on this */ /* ---- the one moving colour ---- The light that travels the outside edge of a board is the brand blue; its nose is the lighter tint. */ --beam-blue:var(--tradeseq-blue); --beam-blue-hot:var(--tradeseq-blue-light); /* ---- the one warm colour: where a firm's queue begins ---- Gold is used for exactly one thing, so it always means that thing. */ --gold:#b8860b; --gold-ink:#7a5a06; --gold-bg:#fdf4dd; --gold-line:rgba(184,134,11,.42); /* ---- THE LANE RAIL — the product's signature ------------------------ A firm is a queue and it advances through it. The rail is that queue at a glance: filled behind the account trading now, hollow ahead of it. Fill and weight carry the meaning, so it survives monochrome. solid ink done today — this account has had its turn solid blue trading now (ringed) ring blue next up hollow queued green passed · red-grey retired · both out of the rotation In COPY mode every pip lights at once, which is the whole difference between the two modes said in one glance. */ --lane:var(--blue); --lane-done:var(--ink-3); --lane-queued:var(--ink-5); --lane-passed:var(--green-400); --lane-retired:var(--ink-5); --lane-w:2px; /* ---- the console: the one deep field in the light rooms ---- */ --plate:#0b1527; --plate-2:#131f33; --plate-3:#1c2b43; --plate-4:#26374f; --plate-tx:#f2f6fb; --plate-tx-2:#a8b8ce; --plate-tx-3:#8d9eb9; --plate-rule:rgba(190,213,242,.14); --plate-rule-2:rgba(190,213,242,.26); --plate-green:#4fc79b; --plate-blue:#7fabf2; --plate-amber:#e0ac4e; --plate-red:#f08a7c; --plate-violet:#a49bf0; /* ---- material: light, cool, shallow. shadows are rationed ---- */ --lift-1:0 1px 2px rgba(11,21,39,.05); --lift-2:0 1px 2px rgba(11,21,39,.04), 0 12px 26px -18px rgba(11,21,39,.34); --lift-3:0 2px 6px rgba(11,21,39,.06), 0 36px 70px -32px rgba(11,21,39,.46); --press:inset 0 1px 2px rgba(11,21,39,.14); --well:inset 0 1px 2px rgba(11,21,39,.07), inset 0 0 0 1px rgba(11,21,39,.07); --ring:0 0 0 2px rgba(31,92,216,.34); --ring-plate:0 0 0 2px rgba(127,171,242,.45); /* ---- type: ONE family. hierarchy is size, weight, alignment ---- Geist every word and every figure, tabular lining numerals Geist Mono identifiers only — account numbers, symbols, the clock */ --brand-sans:'Inter','Geist',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --sans:'Geist','Geist Fallback',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* ---- space: 4px base ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:26px; --s7:34px; --s8:46px; --s9:64px; --s10:88px; /* ---- radius: small only. nothing in a register is a pill ---- */ --r1:3px; --r2:5px; --r3:7px; --r4:10px; --r5:14px; /* ---- motion ---- */ --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:.12s; --t-mid:.24s; --t-slow:.44s; /* ---- shell metrics ---- */ --h-mast:56px; --h-bar:46px; --h-row:36px; --h-top:62px; /* the top application bar */ --pad-x:var(--s6); /* the page gutter — deliberately tight, the table is the point */ } /* ========================================================================= DARK — the default theme. The same tokens, remapped. Deep navy, not black; the brand blue lifted one step so it stays readable on navy; the semantic colours keep their meaning and lose their weight. Every room reads these — there is no second palette anywhere else. ====================================================================== */ :root[data-theme="dark"]{ --bg:#0b1120; --surface:#111a2c; --surface-2:#172338; --surface-3:#1f2d47; --ink:#eef2f8; --ink-2:#d6dde9; --ink-3:#a7b3c7; --ink-4:#90a0b8; --ink-5:#34435d; --line:rgba(190,213,242,.10); --line-2:rgba(190,213,242,.18); --line-3:rgba(190,213,242,.32); --on-ink:#0b1120; --scrim:rgba(2,6,16,.62); --tint:rgba(190,213,242,.05); --tradeseq-ink:#f4f6fa; /* "Trade" on a dark ground */ --blue:#5b93fe; --blue-400:#7fabf2; --blue-100:#294578; --blue-50:#182a4d; --blue-900:#cfe0ff; --green:#4fc79b; --green-400:#3fb88b; --green-50:#0f2e23; --green-900:#9fe6c7; --amber:#e0ac4e; --amber-400:#d09a2c; --amber-50:#3a2c0e; --amber-900:#f2d08a; --red:#f08a7c; --red-400:#e0685a; --red-50:#3d1815; --red-900:#f6b3a9; --red-fill:#c9433a; --violet:#a49bf0; --violet-50:#262452; --violet-fill:#6b61e0; --gold:#d9a521; --gold-ink:#f0cc6a; --gold-bg:#3a2f0c; --gold-line:rgba(217,165,33,.45); --plate:#070c18; --plate-2:#0e1626; --plate-3:#172338; --plate-4:#22314a; --lift-1:0 1px 2px rgba(0,0,0,.35); --lift-2:0 1px 2px rgba(0,0,0,.3), 0 12px 26px -18px rgba(0,0,0,.8); --lift-3:0 2px 6px rgba(0,0,0,.4), 0 36px 70px -32px rgba(0,0,0,.9); --press:inset 0 1px 2px rgba(0,0,0,.45); --well:inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(190,213,242,.08); --ring:0 0 0 2px rgba(91,147,254,.45); --lane-done:var(--ink-3); --lane-queued:var(--ink-5); --lane-retired:var(--ink-5); color-scheme:dark; } :root[data-theme="light"]{ color-scheme:light; } @media (prefers-reduced-motion:reduce){ :root{ --t-fast:0s; --t-mid:0s; --t-slow:0s; } *,*::before,*::after{ animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important; } }