/* ===================================== FX Notes — CORE (tokens, base, theme) ===================================== */ /* Brand + semantic palette (light base) */ :root { /* Brand */ --fx-brand: #6A7BFF; --fx-brand-600: #5869ff; --fx-brand-700: #4657f0; /* Surface & text */ --fx-bg: #F7F8FC; --fx-card: #FFFFFF; --fx-text: #1C2137; --fx-text-muted: #667085; /* Lines, shadows */ --fx-border: #E6E8F0; --fx-shadow: 0 6px 28px rgba(15, 23, 42, .06); /* Accents (gain/flat/loss) */ --fx-up: #22c55e; --fx-flat: #94a3b8; --fx-down: #ef4444; /* Radii / spacing / easing */ --fx-r: 14px; --fx-r-sm: 10px; --fx-space: 16px; --fx-space-sm: 10px; --fx-ease: cubic-bezier(.2, .7, .2, 1); --fx-t-med: .18s; /* Type scale */ --fx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Poppins", Arial, sans-serif; --fx-fs-xs: 12px; --fx-fs-sm: 13px; --fx-fs-md: 14px; --fx-fs-lg: 18px; --fx-fs-xl: 22px; /* Shell metrics */ --fx-sidebar-w: 260px; --fx-sidebar-w-compact: 72px; --fx-topbar-h: 62px; /* --- compat aliases for legacy rules --- */ --text: var(--fx-text); --text-muted: var(--fx-muted); --border: var(--fx-border); --bg: var(--fx-bg); --surface: var(--fx-surface); /* compat: map old --fx-card to --fx-surface if missing */ --fx-card: var(--fx-surface); } /* Auto dark scheme (fallback to system when no explicit data-theme) */ @media (prefers-color-scheme: dark) { :root { --fx-bg: #0B0E13; --fx-card: #11161E; --fx-text: #E6EAF1; --fx-text-muted: #AEB6C5; --fx-border: #1E2531; --fx-shadow: 0 8px 28px rgba(0, 0, 0, .35); } } /* Explicit theme override via */ html[data-theme="light"] { --fx-bg: #F7F8FC; --fx-card: #FFFFFF; --fx-text: #1C2137; --fx-text-muted: #667085; --fx-border: #E6E8F0; --fx-shadow: 0 6px 28px rgba(15, 23, 42, .06); } html[data-theme="dark"] { --fx-bg: #0B0E13; --fx-card: #11161E; --fx-text: #E6EAF1; --fx-text-muted: #AEB6C5; --fx-border: #1E2531; --fx-shadow: 0 8px 28px rgba(0, 0, 0, .35); } /* Base, typography, utilities */ * { box-sizing: border-box } html, body { height: 100% } body { margin: 0; background: var(--fx-bg); color: var(--fx-text); font: var(--fx-fs-md)/1.55 var(--fx-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ .fx-h1 { font: 700 28px/1.2 var(--fx-font); margin: 0 } .fx-h2 { font: 700 22px/1.25 var(--fx-font); margin: 0 } .fx-sub { color: var(--fx-text-muted); font-size: var(--fx-fs-sm) } /* Links, focus */ a { color: var(--fx-brand); text-decoration: none } a:hover { opacity: .9 } :focus-visible { outline: 2px solid var(--fx-brand-600); outline-offset: 2px } /* Containers & grid helpers */ .fx-container { padding: 24px; margin: 0 auto; max-width: 1440px } .fx-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .fx-row-50 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } @media (max-width: 1024px) { .fx-grid { grid-template-columns: 1fr } .fx-row-50 { grid-template-columns: 1fr } } /* Generic chips, mutes, empties */ .fx-muted { color: var(--fx-text-muted) } .fx-empty { text-align: center; color: var(--fx-text-muted); border: 1px dashed var(--fx-border); border-radius: var(--fx-r); padding: 28px; } /* Logo swap logic (used by partials) */ .logo-light { display: inline } .logo-dark { display: none } html[data-theme="dark"] .logo-light { display: none } html[data-theme="dark"] .logo-dark { display: inline } /* Icon button baseline */ .fx-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--fx-border); background: transparent; cursor: pointer; } /* Loader (minimal, compatible with existing #loading/#loading-center) */ #loading { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0, 0, 0, .04); z-index: 9999 } #loading-center { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--fx-border); border-top-color: var(--fx-brand); animation: spin 1s linear infinite } @keyframes spin { to { transform: rotate(360deg) } } /* Compatibility shims (old class names used on pages) */ .fx-card { background: var(--fx-card); border: 1px solid var(--fx-border); border-radius: var(--fx-r); box-shadow: var(--fx-shadow); padding: 16px 18px } .fx-card-title { font: 600 var(--fx-fs-lg)/1.2 var(--fx-font); margin: 0 0 8px } /* Simple rows-as-cards list (Recent Trades) */ .fx-rows-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px } .fx-rows-cards>li { background: var(--fx-card); border: 1px solid var(--fx-border); border-radius: 12px; padding: 12px } /* Buttons */ .fx-btn { --bg: var(--fx-brand); --fg: #fff; --bd: var(--fx-brand); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 600 var(--fx-fs-md)/1 var(--fx-font); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); box-shadow: 0 3px 14px rgba(15, 23, 42, .06); transition: filter var(--fx-t-med) var(--fx-ease) } .fx-btn:hover { filter: brightness(.98) } .fx-btn.small { padding: 6px 10px; border-radius: 10px; font-size: 13px } .fx-btn-ghost { --bg: transparent; --fg: var(--fx-text); --bd: var(--fx-border) } .fx-btn-primary { --bg: var(--fx-brand); --bd: var(--fx-brand); --fg: #fff } .fx-btn-switch { --bg: transparent; --bd: var(--fx-border); --fg: var(--fx-text) } .fx-btn-switch.is-active { --bg: rgba(106, 123, 255, .12); --bd: var(--fx-brand-600); --fg: var(--fx-brand-700) } /* === FX NOTES: TOKEN & BASE REINFORCEMENTS === */ :root { /* spacing */ --fx-space-0: 0; --fx-space-1: .25rem; --fx-space-2: .5rem; --fx-space-3: .75rem; --fx-space-4: 1rem; --fx-space-6: 1.5rem; --fx-space-8: 2rem; --fx-space-10: 2.5rem; --fx-space-12: 3rem; /* radius */ --fx-radius-sm: 8px; --fx-radius: 12px; --fx-radius-lg: 16px; --fx-radius-2xl: 20px; /* shadows */ --fx-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10); --fx-shadow-lg: 0 8px 24px rgba(16, 24, 40, .08); --fx-shadow-xl: 0 16px 40px rgba(16, 24, 40, .10); /* type scale (fallbacks) */ --fx-h1: 28px; --fx-h2: 20px; --fx-text: 14px; /* surfaces */ --fx-bg: #F7F8FC; --fx-surface: #fff; --fx-muted: #667185; --fx-border: #EEF0F4; } /* Base normalisation that some old theme provided */ html, body { height: 100%; } body { background: var(--fx-bg); color: #111827; font-size: var(--fx-text); line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fx-h1 { font-size: var(--fx-h1); font-weight: 700; margin: 0; } .fx-sub { color: var(--fx-muted); }