/* * shared/static/css/capxone-tokens.css — CapXone Design System v2 * ══════════════════════════════════════════════════════════════════ * SINGLE SOURCE OF TRUTH. Load after service CSS so tokens win. * * * * APP ACCENTS (add data-app="" to ): * screener=neon-yellow algoengine=neon-cyan copytrade=neon-orange * journal=neon-red tools=neon-navy orbit=neon-lemon * news=neon-golden billing=neon-violet login=neon-green */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@300;400;500;600;700&family=Azeret+Mono:wght@300;400;500;600&display=swap'); :root{ --bg:#07080a; --bg2:#0e1117; --bg3:#141821; --card:#0f1014; --card2:#141820; --sf:rgba(255,255,255,.042); --sf2:rgba(255,255,255,.07); --sf3:rgba(255,255,255,.11); --bd:rgba(255,255,255,.072); --bd2:rgba(255,255,255,.13); --bd3:rgba(255,255,255,.22); --gb:var(--bd); --border:var(--bd); --border2:var(--bd2); --glass-bg:rgba(255,255,255,.04); --glass-border:rgba(255,255,255,.09); --tx:#eef0f4; --tx2:rgba(238,240,244,.62); --tx3:rgba(238,240,244,.34); --white:var(--tx); --dim:var(--tx2); --dim2:var(--tx3); --t2:var(--tx2); --t3:var(--tx3); --c:var(--tx); --c2:var(--tx2); /* palette */ --grn:#00ff88; --grn-d:rgba(0,255,136,.08); --grn-g:rgba(0,255,136,.30); --cyn:#00e5ff; --cyn-d:rgba(0,229,255,.08); --cyn-g:rgba(0,229,255,.28); --yel2:#ffe500; --yel2-d:rgba(255,229,0,.08); --yel2-g:rgba(255,229,0,.28); --org2:#ff6b00; --org2-d:rgba(255,107,0,.08); --org2-g:rgba(255,107,0,.28); --pnk:#ff2d55; --pnk-d:rgba(255,45,85,.08); --pnk-g:rgba(255,45,85,.28); --nav-blu:#4d6bff; --nav-blu-d:rgba(77,107,255,.08); --nav-blu-g:rgba(77,107,255,.28); --lmn:#7fff00; --lmn-d:rgba(127,255,0,.08); --lmn-g:rgba(127,255,0,.28); --gld:#ffc107; --gld-d:rgba(255,193,7,.08); --gld-g:rgba(255,193,7,.28); --pur:#b06bff; --pur-d:rgba(176,107,255,.08); --pur-g:rgba(176,107,255,.28); --yel:var(--yel2); --blu:#4db8ff; --blu-d:rgba(77,184,255,.08); /* aliases for legacy service vars */ --green:var(--grn); --cyan:var(--cyn); --pink:var(--pnk); --orange:var(--org2); --yellow:var(--yel2); --purple:var(--pur); --black:var(--bg); --red:var(--pnk); /* app accent (default=green; overridden by [data-app]) */ --app-accent:var(--grn); --app-accent-d:var(--grn-d); --app-accent-g:var(--grn-g); /* typography — 3 canonical fonts */ --disp:'Bebas Neue','Arial Narrow',sans-serif; --mono:'Azeret Mono','Fira Code',monospace; --sans:'Manrope',system-ui,-apple-system,sans-serif; --syne:var(--disp); /* Syne dropped — Bebas Neue handles all display */ --body:var(--sans); --bebas:var(--disp); --cx-font-display:var(--disp); --cx-font-body:var(--sans); --cx-font-mono:var(--mono); /* shadows */ --sh:0 8px 32px rgba(0,0,0,.55); --sh2:0 2px 12px rgba(0,0,0,.4); /* layout */ --sidebar:230px; --nav:rgba(7,8,10,.88); /* copytrade glass */ --glass-md:rgba(255,255,255,.055); --glass-strong:rgba(255,255,255,.09); --glass-hover:rgba(255,255,255,.07); --page-bg:var(--bg); --page-bg2:var(--bg2); --noise-op:.022; /* Glass morphism tokens */ --glass-blur: 20px; --glass-saturate: 1.4; --glass-bg-light: rgba(255,255,255,.042); --glass-bg-card: rgba(255,255,255,.038); --glass-bg-hover: rgba(255,255,255,.065); --glass-border: rgba(255,255,255,.08); --glass-border-hover: rgba(255,255,255,.15); /* Glow tokens */ --glow-sm: 0 0 12px; --glow-md: 0 0 24px; --glow-lg: 0 0 40px; --glow-xl: 0 0 60px; /* Radius — slightly larger for modern feel */ --radius: 14px; --radius-sm: 8px; --radius-xs: 4px; --radius-full: 100px; } [data-theme="light"]{ --bg:#f0f2f5; --bg2:#e8ebf0; --bg3:#dde1e8; --card:#ffffff; --card2:#f6f8fb; --sf:rgba(255,255,255,.7); --sf2:rgba(255,255,255,.85); --bd:rgba(0,0,0,.07); --bd2:rgba(0,0,0,.11); --bd3:rgba(0,0,0,.18); --tx:#0d1117; --tx2:rgba(13,17,23,.62); --tx3:rgba(13,17,23,.38); --grn:#00b860; --grn-d:rgba(0,184,96,.1); --grn-g:rgba(0,184,96,.22); --cyn:#0095d9; --cyn-d:rgba(0,149,217,.1); --cyn-g:rgba(0,149,217,.18); --pnk:#e0194f; --pnk-d:rgba(224,25,79,.1); --pnk-g:rgba(224,25,79,.18); --org2:#c45400; --org2-d:rgba(196,84,0,.1); --org2-g:rgba(196,84,0,.18); --yel2:#c4a800; --yel2-d:rgba(196,168,0,.1); --yel2-g:rgba(196,168,0,.18); --lmn:#4a9200; --lmn-d:rgba(74,146,0,.1); --lmn-g:rgba(74,146,0,.18); --gld:#b38700; --gld-d:rgba(179,135,0,.1); --gld-g:rgba(179,135,0,.18); --nav-blu:#3a4fd9; --nav-blu-d:rgba(58,79,217,.1); --nav-blu-g:rgba(58,79,217,.18); --pur:#7c3aed; --pur-d:rgba(124,58,237,.1); --pur-g:rgba(124,58,237,.18); --sh:0 8px 32px rgba(0,0,0,.1); --sh2:0 2px 12px rgba(0,0,0,.07); --nav:rgba(240,242,245,.88); --glass-bg:rgba(255,255,255,.7); --glass-border:rgba(0,0,0,.09); --page-bg:var(--bg); --page-bg2:var(--bg2); /* Light theme glass morphism tokens */ --glass-bg-light: rgba(255,255,255,.65); --glass-bg-card: rgba(255,255,255,.72); --glass-bg-hover: rgba(255,255,255,.82); --glass-border: rgba(0,0,0,.06); --glass-border-hover: rgba(0,0,0,.12); } /* per-app accent (add data-app on or ) */ [data-app="screener"] {--app-accent:var(--yel2); --app-accent-d:var(--yel2-d); --app-accent-g:var(--yel2-g);} [data-app="algoengine"] {--app-accent:var(--cyn); --app-accent-d:var(--cyn-d); --app-accent-g:var(--cyn-g);} [data-app="copytrade"] {--app-accent:var(--org2); --app-accent-d:var(--org2-d); --app-accent-g:var(--org2-g);} [data-app="journal"] {--app-accent:var(--pnk); --app-accent-d:var(--pnk-d); --app-accent-g:var(--pnk-g);} [data-app="tools"] {--app-accent:var(--nav-blu); --app-accent-d:var(--nav-blu-d); --app-accent-g:var(--nav-blu-g);} [data-app="orbit"] {--app-accent:var(--lmn); --app-accent-d:var(--lmn-d); --app-accent-g:var(--lmn-g);} [data-app="news"] {--app-accent:var(--gld); --app-accent-d:var(--gld-d); --app-accent-g:var(--gld-g);} [data-app="billing"] {--app-accent:var(--pur); --app-accent-d:var(--pur-d); --app-accent-g:var(--pur-g);} [data-app="login"] {--app-accent:var(--grn); --app-accent-d:var(--grn-d); --app-accent-g:var(--grn-g);} [data-app="admin"] {--app-accent:var(--pnk); --app-accent-d:var(--pnk-d); --app-accent-g:var(--pnk-g);} [data-app="dashboard"] {--app-accent:var(--grn); --app-accent-d:var(--grn-d); --app-accent-g:var(--grn-g);} body{font-family:var(--sans);background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} ::selection{background:var(--app-accent);color:#000;} ::-webkit-scrollbar{width:3px;height:3px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--app-accent);border-radius:4px;opacity:.5;}