/* ═══════════════════════════════════════════════════════════════ ds.css — TobviousTrade redesign foundation (Revolut-inspired) Loaded AFTER theme.css so it overrides the design tokens. Airy navigation + clean-compact data · light + dark. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); /* ── DARK (default) ─────────────────────────────────────────── */ :root { --bg: #0b0d12; --bg2: #14171f; /* card / surface */ --bg3: #1b1f2a; /* raised input */ --bg4: #232838; --border: #1e232f; --border2: #2a3140; --text: #f2f5fa; --muted: #8b93a7; --muted2: #5b6376; --accent: #7c7cff; /* primary indigo */ --accent2: #5b8cff; /* blue */ --up: #22c79a; --down: #ff5a76; --warn: #f4b740; --amber: #f4b740; --c-val:#5b8cff; --c-div:#22c79a; --c-prof:#a78bfa; --c-grow:#f4b740; --c-bal:#38bdf8; --c-risk:#fb7185; --c-analyst:#e879f9; --c-qv:#34d399; --c-dcf:#fbbf24; --c-esg:#6ee7b7; --body-grad-1: rgba(124,124,255,0.07); --body-grad-2: rgba(91,140,255,0.05); --scrollbar-thumb: #2a3140; --row-hover: rgba(124,124,255,0.06); --topbar-bg: rgba(11,13,18,0.72); --theme-icon: "☀️"; /* ── design-system primitives ── */ --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow: 0 6px 28px rgba(0,0,0,0.34); --shadow-lg: 0 16px 48px rgba(0,0,0,0.5); --ring: 0 0 0 3px rgba(124,124,255,0.28); } /* ── LIGHT ──────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #f4f6fa; --bg2: #ffffff; --bg3: #f3f5f9; --bg4: #e9edf4; --border: #e8ebf2; --border2: #dde1ea; --text: #0c0e15; --muted: #69707f; --muted2: #9aa1b1; --accent: #5b5bf6; --accent2: #3b6df6; --up: #06b483; --down: #f0436a; --warn: #e08600; --amber: #e08600; --c-val:#3b6df6; --c-div:#06b483; --c-prof:#7c5cf6; --c-grow:#e08600; --c-bal:#0ea5e9; --c-risk:#f0436a; --c-analyst:#c026d3; --c-qv:#06b483; --c-dcf:#e08600; --c-esg:#10b981; --body-grad-1: rgba(91,91,246,0.05); --body-grad-2: rgba(59,109,246,0.045); --scrollbar-thumb: #d4d8e2; --row-hover: rgba(91,91,246,0.045); --topbar-bg: rgba(255,255,255,0.74); --theme-icon: "🌙"; --shadow-sm: 0 1px 2px rgba(16,24,40,0.05); --shadow: 0 2px 8px rgba(16,24,40,0.06), 0 10px 30px rgba(16,24,40,0.07); --shadow-lg: 0 16px 48px rgba(16,24,40,0.14); --ring: 0 0 0 3px rgba(91,91,246,0.18); } /* ── Base typography (pages opt in via ) ───── Swaps every text element to the new sans, but leaves icon fonts (Font Awesome → any class containing "fa") untouched. !important beats the per-page hardcoded "Syne" / "JetBrains Mono" rules. */ body.ds { font-family: var(--font-sans); } body.ds *:not([class*="fa"]):not(.fa):not(i) { font-family: var(--font-sans) !important; } body.ds table td, body.ds table th, body.ds .ds-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ── Reusable components ────────────────────────────────────── */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; padding: 0.7rem 1.15rem; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: transform 0.12s ease, background 0.18s, box-shadow 0.18s, border-color 0.18s; white-space: nowrap; line-height: 1; } .ds-btn:active { transform: scale(0.97); } .ds-btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); } .ds-btn-primary:hover { box-shadow: var(--ring); } .ds-btn-ghost { background: var(--bg2); color: var(--text); border-color: var(--border); } .ds-btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .ds-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .ds-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg2); color: var(--muted); } /* Soft tinted icon tile (Revolut-style) */ .ds-tile { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } /* Scrollbars */ .ds ::-webkit-scrollbar { width: 8px; height: 8px; } .ds ::-webkit-scrollbar-track { background: transparent; } .ds ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; } /* ── Shared chrome overrides (Phase B) ────────────────────────── The journal pages (trade_journal, analytics, gestión, status…) each hardcode a dark page-nav. Higher-specificity selectors here re-point it to tokens so it follows light/dark. */ body.ds nav.page-nav { background: var(--topbar-bg); border-bottom-color: var(--border); } body.ds .page-nav-item { color: var(--muted); } body.ds .page-nav-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); border-color: var(--border); } body.ds .page-nav-item.active, body.ds .page-nav-item.active:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: none; } body.ds .page-nav-item.active i { color: var(--accent); } /* Top header / topbar — most pages hardcode a dark background; re-point it to the theme token so it follows light/dark (glassy via backdrop-blur). */ body.ds header, body.ds .topbar { background: var(--topbar-bg); border-bottom-color: var(--border); }