/* ========================================================================== LuxTrader Admin — Design Tokens & Base Styles -------------------------------------------------------------------------- Semantic, theme-driven tokens. Tailwind (configured in the page ) maps utility colors to these CSS variables, so `bg-surface`, `text-ink`, `border-line`, `text-accent`, etc. automatically flip in dark mode. Palette rationale (LuxTrader = trading education): • Neutral ink/zinc base for a restrained, Linear/Vercel-grade canvas. • Emerald accent → growth / profit / primary actions. • Red → loss / destructive only. ========================================================================== */ :root { /* Surfaces & lines */ --bg: 250 250 251; /* app canvas */ --surface: 255 255 255; /* cards, panels */ --surface-2: 244 244 246; /* subtle fills, hovers */ --surface-3: 237 237 240; /* pressed / track */ --line: 228 228 231; /* borders, dividers */ --line-strong: 212 212 216; /* Text */ --ink: 24 24 27; /* primary text */ --muted: 90 90 99; /* secondary text (AA) */ --faint: 140 140 150; /* tertiary / hints */ /* Brand & semantics */ --accent: 4 120 87; /* emerald-700 (AA on white) */ --accent-hover: 6 95 70; --accent-soft: 209 250 229; /* emerald-100 fill */ --accent-ink: 6 78 59; /* text on soft fill */ --success: 21 128 61; --success-soft: 220 252 231; --danger: 220 38 38; --danger-soft: 254 226 226; --warning: 180 83 9; --warning-soft: 254 243 199; --info: 37 99 235; --info-soft: 219 234 254; /* Elevation */ --shadow-sm: 0 1px 2px 0 rgb(24 24 27 / 0.04); --shadow-md: 0 1px 3px 0 rgb(24 24 27 / 0.06), 0 1px 2px -1px rgb(24 24 27 / 0.05); --shadow-lg: 0 10px 30px -12px rgb(24 24 27 / 0.18), 0 4px 12px -8px rgb(24 24 27 / 0.10); --ring: 4 120 87; color-scheme: light; } .dark { --bg: 9 9 11; --surface: 18 18 20; --surface-2: 28 28 32; --surface-3: 38 38 43; --line: 39 39 45; --line-strong: 55 55 62; --ink: 244 244 245; --muted: 168 168 178; --faint: 118 118 128; --accent: 52 211 153; /* emerald-400 — brighter on dark */ --accent-hover: 16 185 129; --accent-soft: 6 50 41; --accent-ink: 167 243 208; --success: 74 222 128; --success-soft: 5 46 22; --danger: 248 113 113; --danger-soft: 60 16 16; --warning: 251 191 36; --warning-soft: 49 33 6; --info: 96 165 250; --info-soft: 17 31 58; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.30); --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30); --shadow-lg: 0 16px 40px -16px rgb(0 0 0 / 0.70), 0 6px 16px -10px rgb(0 0 0 / 0.55); --ring: 52 211 153; color-scheme: dark; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ * { border-color: rgb(var(--line)); } html { -webkit-text-size-adjust: 100%; } body { font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Numeric/tabular figures for data, prices, IDs */ .tnum { font-variant-numeric: tabular-nums; } /* Honour reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Scrollbars — subtle, on-brand -------------------------------------------------------------------------- */ .scroll-thin { scrollbar-width: thin; scrollbar-color: rgb(var(--line-strong)) transparent; } .scroll-thin::-webkit-scrollbar { width: 9px; height: 9px; } .scroll-thin::-webkit-scrollbar-thumb { background: rgb(var(--line-strong)); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; } .scroll-thin::-webkit-scrollbar-thumb:hover { background: rgb(var(--faint)); background-clip: padding-box; } .scroll-thin::-webkit-scrollbar-track { background: transparent; } /* -------------------------------------------------------------------------- Focus — visible, accessible, on-brand (never removed) -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- Reusable component classes (compose with Tailwind utilities) -------------------------------------------------------------------------- */ .card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 14px; box-shadow: var(--shadow-sm); } .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 550; font-size: 0.875rem; line-height: 1; padding: 0.5625rem 0.875rem; border-radius: 9px; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease; white-space: nowrap; cursor: pointer; user-select: none; } .btn:active { transform: translateY(0.5px); } .btn-primary { background: rgb(var(--accent)); color: #fff; box-shadow: var(--shadow-sm); } .dark .btn-primary { color: rgb(9 9 11); } .btn-primary:hover { background: rgb(var(--accent-hover)); } .btn-secondary { background: rgb(var(--surface)); color: rgb(var(--ink)); border: 1px solid rgb(var(--line)); } .btn-secondary:hover { background: rgb(var(--surface-2)); } .btn-ghost { background: transparent; color: rgb(var(--muted)); } .btn-ghost:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); } .btn-danger { background: rgb(var(--danger)); color: #fff; } .btn-danger:hover { filter: brightness(0.93); } .btn-sm { padding: 0.375rem 0.625rem; font-size: 0.8125rem; border-radius: 8px; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .input { width: 100%; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 9px; padding: 0.5625rem 0.75rem; font-size: 0.875rem; color: rgb(var(--ink)); transition: border-color .15s ease, box-shadow .15s ease; } .input::placeholder { color: rgb(var(--faint)); } .input:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.16); } .input[aria-invalid="true"] { border-color: rgb(var(--danger)); } .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(var(--danger) / 0.16); } .badge { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.75rem; font-weight: 550; line-height: 1.2; padding: 0.1875rem 0.5rem; border-radius: 7px; border: 1px solid transparent; } .badge .dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; } /* Sidebar nav links */ .nav-link { display: flex; align-items: center; gap: 0.6875rem; padding: 0.4375rem 0.625rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; color: rgb(var(--muted)); transition: background-color .12s ease, color .12s ease; position: relative; } .nav-link:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); } .nav-link.active { background: rgb(var(--surface-2)); color: rgb(var(--ink)); font-weight: 600; } .nav-link.active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 9999px; background: rgb(var(--accent)); } /* Data table */ .dt { width: 100%; border-collapse: separate; border-spacing: 0; } .dt thead th { text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--faint)); padding: 0.625rem 1rem; background: rgb(var(--surface-2)); border-bottom: 1px solid rgb(var(--line)); white-space: nowrap; } .dt thead th:first-child { border-top-left-radius: 0; } .dt tbody td { padding: 0.8125rem 1rem; font-size: 0.875rem; color: rgb(var(--ink)); border-bottom: 1px solid rgb(var(--line)); vertical-align: middle; } .dt tbody tr:last-child td { border-bottom: none; } .dt tbody tr { transition: background-color .1s ease; } .dt tbody tr:hover { background: rgb(var(--surface-2) / 0.6); } /* Animations */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .animate-fade-in { animation: fade-in .2s ease both; } .animate-rise { animation: rise .28s cubic-bezier(0.22, 1, 0.36, 1) both; } .animate-scale-in { animation: scale-in .16s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Stagger helper for grids/lists */ .stagger > * { animation: rise .32s cubic-bezier(0.22, 1, 0.36, 1) both; } .stagger > *:nth-child(1) { animation-delay: .02s; } .stagger > *:nth-child(2) { animation-delay: .05s; } .stagger > *:nth-child(3) { animation-delay: .08s; } .stagger > *:nth-child(4) { animation-delay: .11s; } .stagger > *:nth-child(5) { animation-delay: .14s; } .stagger > *:nth-child(6) { animation-delay: .17s; } .stagger > *:nth-child(7) { animation-delay: .20s; } .stagger > *:nth-child(8) { animation-delay: .23s; } /* Skeleton shimmer */ .skeleton { background: linear-gradient(90deg, rgb(var(--surface-2)) 25%, rgb(var(--surface-3)) 50%, rgb(var(--surface-2)) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Loading spinner (GPU-accelerated, reduced-motion aware) */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 9999px; animation: spin .55s linear infinite; vertical-align: -0.125em; /* align with text baseline */ } .btn .spinner { width: 0.875em; height: 0.875em; border-width: 1.5px; } /* Alpine cloak */ [x-cloak] { display: none !important; }