/* ========================================================================== Glaux design tokens · v1.0 · 2026-11-01 Palette "Ember". Dark-first: the dashboard and the landing page are dark. Plain CSS custom properties, no build step. Prefix: --glx- Fonts: load fonts.css (vendored woff2) before this file. ========================================================================== */ :root { color-scheme: dark; /* ---- Core palette ------------------------------------------------------ */ --glx-color-ink: #0E0E10; /* page and app background; logo colour on light */ --glx-color-ink-2: #17171B; /* raised surfaces, glass panel base */ --glx-color-ink-3: #1F1F24; /* hover on raised surfaces, opaque level-3 */ --glx-color-smoke: #2A2A30; /* lines, borders, dividers, tracks */ --glx-color-stone: #A8A29A; /* secondary text (7.6:1 on Ink) */ --glx-color-stone-dim: #6E6A64; /* disabled text and placeholder glyphs only */ --glx-color-cream: #F6F1E9; /* primary text on dark; light backgrounds; logo on dark */ --glx-color-ember: #FF6B3D; /* the single accent (6.8:1 on Ink) */ --glx-color-ember-hover: #FF8259; /* Ember button hover */ --glx-color-ember-press: #E85A2E; /* Ember button pressed */ --glx-color-ember-soft: rgba(255, 107, 61, 0.14); /* accent fills, hover, selection */ --glx-color-ember-line: rgba(255, 107, 61, 0.42); /* accent outlines on glass */ --glx-color-on-ember: #0E0E10; /* text on Ember (Ink: 6.8:1; Cream fails at 2.5:1) */ --glx-color-moonlight: #C9D6E8; /* background glow only, at 8-10% */ /* ---- Semantic text & lines -------------------------------------------- */ --glx-text-primary: var(--glx-color-cream); --glx-text-secondary: var(--glx-color-stone); --glx-text-disabled: var(--glx-color-stone-dim); --glx-text-link: var(--glx-color-ember); --glx-text-on-accent: var(--glx-color-on-ember); --glx-line: var(--glx-color-smoke); --glx-line-soft: rgba(246, 241, 233, 0.07); --glx-line-strong: rgba(246, 241, 233, 0.16); /* ---- Data colours (dashboard only; Ember is never a data colour) ------ */ --glx-color-gain: #34D399; --glx-color-loss: #F43F5E; --glx-color-warning: #FACC15; --glx-color-info: #7FA8D9; /* cool moonlight blue */ --glx-color-gain-soft: rgba(52, 211, 153, 0.14); --glx-color-loss-soft: rgba(244, 63, 94, 0.14); --glx-color-warning-soft: rgba(250, 204, 21, 0.13); --glx-color-info-soft: rgba(127, 168, 217, 0.15); /* ---- Chart palette (6 categories, CVD-checked on Ink 2; min ΔE2000 ≥ 9.9 under full deutan/protan/tritan simulation). Always label series. -- */ --glx-chart-1: #8DB8EC; /* sky */ --glx-chart-2: #E3C383; /* sand */ --glx-chart-3: #3FA68F; /* sea */ --glx-chart-4: #C98BC0; /* orchid */ --glx-chart-5: #3F6FB5; /* deep */ --glx-chart-6: #DCE2EA; /* pale */ --glx-chart-candle-up: var(--glx-color-gain); --glx-chart-candle-down: var(--glx-color-loss); --glx-chart-candle-up-fill: rgba(52, 211, 153, 0.22); --glx-chart-candle-down-fill: rgba(244, 63, 94, 0.85); --glx-chart-equity-line: var(--glx-chart-1); --glx-chart-benchmark-line: var(--glx-color-stone); --glx-chart-area-top: rgba(141, 184, 236, 0.28); --glx-chart-area-bottom: rgba(141, 184, 236, 0); --glx-chart-area: linear-gradient(180deg, var(--glx-chart-area-top), var(--glx-chart-area-bottom)); --glx-chart-drawdown-area: linear-gradient(180deg, rgba(244, 63, 94, 0), rgba(244, 63, 94, 0.22)); --glx-chart-grid: rgba(246, 241, 233, 0.06); --glx-chart-axis: rgba(246, 241, 233, 0.14); --glx-chart-crosshair: rgba(246, 241, 233, 0.38); --glx-chart-label: var(--glx-color-stone); --glx-chart-heat-0: #1C1C21; /* calendar heatmap: no trading */ --glx-chart-heat-loss-2: rgba(244, 63, 94, 0.75); --glx-chart-heat-loss-1: rgba(244, 63, 94, 0.35); --glx-chart-heat-gain-1: rgba(52, 211, 153, 0.35); --glx-chart-heat-gain-2: rgba(52, 211, 153, 0.75); /* ---- Typography -------------------------------------------------------- */ --glx-font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --glx-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --glx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --glx-font-numeric: "tnum" 1, "zero" 0; /* use with font-feature-settings */ /* Type scale · desktop (size / line-height / weight / tracking) */ --glx-type-display-xl-size: 88px; --glx-type-display-xl-line: 92px; --glx-type-display-xl-weight: 500; --glx-type-display-xl-track: -0.025em; --glx-type-display-l-size: 64px; --glx-type-display-l-line: 70px; --glx-type-display-l-weight: 500; --glx-type-display-l-track: -0.02em; --glx-type-display-m-size: 48px; --glx-type-display-m-line: 54px; --glx-type-display-m-weight: 500; --glx-type-display-m-track: -0.015em; --glx-type-h1-size: 32px; --glx-type-h1-line: 40px; --glx-type-h1-weight: 500; --glx-type-h1-track: -0.01em; /* Fraunces: page titles */ --glx-type-h2-size: 24px; --glx-type-h2-line: 32px; --glx-type-h2-weight: 500; --glx-type-h2-track: -0.005em; /* Fraunces: section titles */ --glx-type-h3-size: 17px; --glx-type-h3-line: 24px; --glx-type-h3-weight: 600; --glx-type-h3-track: -0.005em; /* Inter: card titles */ --glx-type-body-size: 15px; --glx-type-body-line: 24px; --glx-type-body-weight: 400; --glx-type-body-track: 0; --glx-type-body-sm-size: 13px; --glx-type-body-sm-line: 20px; --glx-type-body-sm-weight: 400; --glx-type-body-sm-track: 0; --glx-type-label-size: 11px; --glx-type-label-line: 16px; --glx-type-label-weight: 600; --glx-type-label-track: 0.12em; /* uppercase */ --glx-type-caption-size: 12px; --glx-type-caption-line: 16px; --glx-type-caption-weight: 400; --glx-type-caption-track: 0.005em; --glx-type-kpi-l-size: 36px; --glx-type-kpi-l-line: 40px; --glx-type-kpi-l-weight: 500; --glx-type-kpi-l-track: -0.02em; /* JetBrains Mono */ --glx-type-kpi-m-size: 24px; --glx-type-kpi-m-line: 30px; --glx-type-kpi-m-weight: 500; --glx-type-kpi-m-track: -0.01em; --glx-type-num-table-size: 13px; --glx-type-num-table-line: 20px; --glx-type-num-table-weight: 400; --glx-type-num-table-track: 0; /* ---- Spacing (4 px grid) ---------------------------------------------- */ --glx-space-0: 0; --glx-space-1: 4px; --glx-space-2: 8px; --glx-space-3: 12px; --glx-space-4: 16px; --glx-space-5: 20px; --glx-space-6: 24px; --glx-space-8: 32px; --glx-space-10: 40px; --glx-space-12: 48px; --glx-space-16: 64px; --glx-space-20: 80px; --glx-space-24: 96px; --glx-space-32: 128px; /* ---- Radii -------------------------------------------------------------- */ --glx-radius-xs: 4px; /* checkboxes, sparkline bars */ --glx-radius-sm: 8px; /* tooltips, menu items, segmented items */ --glx-radius-input: 12px; /* inputs, selects, segmented control */ --glx-radius-button: 999px; /* buttons are pills */ --glx-radius-card: 20px; /* KPI tiles, glass cards */ --glx-radius-panel: 24px; /* large panels, dialogs, sheets */ --glx-radius-pill: 999px; /* status pills, chips, badges */ /* ---- Layout ------------------------------------------------------------- */ --glx-layout-max: 1440px; --glx-layout-columns: 12; --glx-layout-gutter: 24px; --glx-layout-margin: 32px; --glx-layout-sidebar: 248px; --glx-layout-sidebar-collapsed: 76px; --glx-layout-topbar: 72px; --glx-layout-bottombar: 76px; /* Breakpoints (use in @media; custom properties cannot be used there): phone 0–599 px design width 390, 4 columns, 16 gutter, 16 margin, bottom bar tablet 600–1023 px design width 834, 8 columns, 20 gutter, 24 margin, collapsed sidebar desktop 1024 px + design width 1440, 12 columns, 24 gutter, 32 margin, expanded sidebar */ /* ---- Glass surfaces ----------------------------------------------------- */ /* Level 1: cards and tiles sitting on the background */ --glx-glass-1-bg: rgba(23, 23, 27, 0.62); --glx-glass-1-blur: 18px; --glx-glass-1-border: rgba(246, 241, 233, 0.07); --glx-glass-1-highlight: inset 0 1px 0 rgba(246, 241, 233, 0.06); --glx-glass-1-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px rgba(0, 0, 0, 0.22); --glx-glass-1-fallback: #17171B; /* Level 2: panels, top bar, sidebar, menus, popovers */ --glx-glass-2-bg: rgba(28, 28, 33, 0.72); --glx-glass-2-blur: 24px; --glx-glass-2-border: rgba(246, 241, 233, 0.10); --glx-glass-2-highlight: inset 0 1px 0 rgba(246, 241, 233, 0.08); --glx-glass-2-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 18px 48px rgba(0, 0, 0, 0.36); --glx-glass-2-fallback: #1B1B20; /* Level 3: dialogs, sheets, toasts, the passkey prompt */ --glx-glass-3-bg: rgba(33, 33, 39, 0.84); --glx-glass-3-blur: 32px; --glx-glass-3-border: rgba(246, 241, 233, 0.13); --glx-glass-3-highlight: inset 0 1px 0 rgba(246, 241, 233, 0.10); --glx-glass-3-shadow: 0 4px 12px rgba(0, 0, 0, 0.40), 0 32px 80px rgba(0, 0, 0, 0.55); --glx-glass-3-fallback: #212127; --glx-scrim: rgba(8, 8, 10, 0.62); /* ---- Background: night sea --------------------------------------------- */ --glx-bg-glow-ember: rgba(255, 107, 61, 0.12); --glx-bg-glow-moon: rgba(201, 214, 232, 0.09); --glx-bg-scene: radial-gradient(60% 50% at 82% 4%, var(--glx-bg-glow-ember), transparent 70%), radial-gradient(55% 60% at 8% 96%, var(--glx-bg-glow-moon), transparent 70%), radial-gradient(40% 35% at 30% 20%, rgba(201, 214, 232, 0.04), transparent 70%), var(--glx-color-ink); /* ---- Shadows & focus ---------------------------------------------------- */ --glx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --glx-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32); --glx-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5); --glx-shadow-ember: 0 6px 22px rgba(255, 107, 61, 0.28); /* primary button hover only */ --glx-focus-ring: 0 0 0 2px var(--glx-color-ink), 0 0 0 4px var(--glx-color-ember); --glx-focus-ring-width: 2px; --glx-focus-ring-offset: 2px; /* ---- Motion ------------------------------------------------------------- */ --glx-ease-standard: cubic-bezier(0.2, 0, 0, 1); --glx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --glx-ease-in: cubic-bezier(0.4, 0, 1, 1); --glx-ease-linear: linear; --glx-duration-instant: 80ms; /* press feedback */ --glx-duration-hover: 140ms; /* hover colour/opacity */ --glx-duration-press: 100ms; --glx-duration-base: 200ms; /* toggles, tabs, chips */ --glx-duration-panel: 320ms; /* panel/row expand, sheet, dialog */ --glx-duration-countup: 900ms; /* number count-up on first paint */ --glx-duration-tick: 650ms; /* price-tick flash (fade from soft tint) */ --glx-duration-hold: 1200ms; /* press-and-hold confirm */ --glx-duration-drift: 90s; /* background glow drift, one cycle */ --glx-press-scale: 0.98; /* ---- Z-index ------------------------------------------------------------ */ --glx-z-base: 0; --glx-z-sticky: 10; --glx-z-nav: 20; --glx-z-overlay: 40; --glx-z-dialog: 50; --glx-z-toast: 60; --glx-z-tooltip: 70; } /* Phone type scale (≤ 599 px) */ @media (max-width: 599px) { :root { --glx-type-display-xl-size: 48px; --glx-type-display-xl-line: 52px; --glx-type-display-l-size: 40px; --glx-type-display-l-line: 44px; --glx-type-display-m-size: 32px; --glx-type-display-m-line: 38px; --glx-type-h1-size: 26px; --glx-type-h1-line: 32px; --glx-type-h2-size: 21px; --glx-type-h2-line: 28px; --glx-type-h3-size: 16px; --glx-type-h3-line: 22px; --glx-type-body-size: 15px; --glx-type-body-line: 22px; --glx-type-kpi-l-size: 28px; --glx-type-kpi-l-line: 32px; --glx-type-kpi-m-size: 20px; --glx-type-kpi-m-line: 26px; --glx-layout-margin: 16px; --glx-layout-gutter: 16px; } } /* Reduced motion: no drift, no count-up, flashes become instant tints */ @media (prefers-reduced-motion: reduce) { :root { --glx-duration-hover: 0ms; --glx-duration-base: 0ms; --glx-duration-panel: 0ms; --glx-duration-countup: 0ms; --glx-duration-tick: 0ms; --glx-duration-drift: 0s; --glx-press-scale: 1; } } /* Reduced transparency: glass becomes opaque */ @media (prefers-reduced-transparency: reduce) { :root { --glx-glass-1-bg: var(--glx-glass-1-fallback); --glx-glass-2-bg: var(--glx-glass-2-fallback); --glx-glass-3-bg: var(--glx-glass-3-fallback); --glx-glass-1-blur: 0px; --glx-glass-2-blur: 0px; --glx-glass-3-blur: 0px; } }