/* ========================================================================== Design tokens Theme switching: [data-theme="dark"] / [data-theme="light"] on , falls back to prefers-color-scheme when no explicit theme is set. ========================================================================== */ :root { /* ---- Typography ---- */ --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif; --font-family-mono: "SF Mono", "Menlo", "Consolas", monospace; /* Content sizes stay fixed and never drop below 13px; only the display sizes (title1 / large / hero) are fluid. Density is bought by removing chrome (borders, shadows, padding), not by shrinking text - see the density tokens below. */ --fs-caption: 0.75rem; /* 12px - labels only */ --fs-footnote: 0.8125rem; /* 13px - minimum for content */ --fs-body: 0.9375rem; /* 15px */ --fs-callout: 1.0625rem; /* 17px */ --fs-title3: 1.25rem; /* 20px */ --fs-title2: 1.5rem; /* 24px */ --fs-title1: clamp(1.5rem, 1.31rem + 0.6vw, 1.75rem); /* 24 -> 28px (was fixed 30px) */ --fs-large: clamp(1.75rem, 1.35rem + 1.25vw, 2.25rem); /* 28 -> 36px (was fixed 40px) */ --fs-hero: clamp(2rem, 1.2rem + 2.2vw, 2.75rem); /* 32 -> 44px (was fixed 52px) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-normal: 1.5; /* ---- Spacing scale (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Density ---- Comfortable is the default; the Compact override lives in the :root[data-density="compact"] block at the bottom of this file and is driven by Settings -> Appearance -> Density (persisted as the `density` UI preference, exactly like `theme`). */ --card-pad: var(--space-6); --row-h: 48px; --stack-gap: var(--space-4); --section-gap: var(--space-8); /* ---- Radius scale ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 16px; /* was 20px */ --radius-2xl: 20px; /* was 28px */ --radius-pill: 999px; /* ---- Motion ---- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decel: cubic-bezier(0, 0, 0.2, 1); --ease-accel: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 100ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 360ms; --dur-slower: 520ms; /* ---- Layout ---- */ --sidebar-width: 248px; --sidebar-width-collapsed: 72px; --topbar-height: 64px; --content-max-width: 1440px; /* ---- Z-index ---- */ --z-sidebar: 100; --z-topbar: 90; /* Below the modal pair on purpose: the Trade Detail drawer has to stay open underneath the Edit / Delete dialogs it launches. */ --z-drawer-backdrop: 450; --z-drawer: 460; --z-modal-backdrop: 500; --z-modal: 510; --z-dropdown: 520; --z-toast: 600; /* ---- Semantic colors (theme independent) ---- Same hues and the same meanings as before, pulled back roughly 20% in saturation. The intent is a slightly quieter surface, not a different language: profit is still unmistakably green, loss unmistakably red, and the accent unmistakably blue. */ --color-profit: #45c169; --color-profit-soft: rgba(69, 193, 105, 0.13); --color-loss: #ec5b52; --color-loss-soft: rgba(236, 91, 82, 0.13); --color-warning: #e79c2a; --color-warning-soft: rgba(231, 156, 42, 0.13); --color-accent: #3389e0; --color-accent-soft: rgba(51, 137, 224, 0.13); --color-accent-rgb: 51, 137, 224; /* Foreground on top of --color-accent (primary buttons, FAB). Flips in the minimal palette, where the accent becomes a near-white/near-black neutral instead of blue. */ --color-on-accent: #ffffff; } /* ---- Dark theme (default) ---- */ :root, :root[data-theme="dark"] { color-scheme: dark; --color-bg: #000000; --color-bg-elevated: #0c0c0e; --color-surface: #131316; --color-surface-raised: #1c1c1f; --color-surface-hover: #232326; --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.14); --color-text-primary: rgba(255, 255, 255, 0.96); --color-text-secondary: rgba(255, 255, 255, 0.62); --color-text-tertiary: rgba(255, 255, 255, 0.38); --glass-bg: rgba(28, 28, 31, 0.72); --glass-border: rgba(255, 255, 255, 0.08); /* Two levels only (see ยง4.2 of the direction doc): --shadow-sm for resting surfaces, --shadow-lg for genuinely floating layers (modals, dropdowns, toasts, the mobile drawer). --shadow-md / --shadow-xl are kept as aliases so no call site had to change. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: var(--shadow-sm); --shadow-xl: var(--shadow-lg); /* Faint top hairline that reads as "lit from above" on raised surfaces. */ --surface-highlight: rgba(255, 255, 255, 0.045); --scrollbar-thumb: rgba(255, 255, 255, 0.16); } /* ---- Light theme ---- */ :root[data-theme="light"] { color-scheme: light; --color-bg: #f4f4f6; --color-bg-elevated: #fafafb; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-surface-hover: #f0f0f2; /* Deliberately stronger than the dark theme's equivalents (0.08 / 0.14): --surface-highlight is transparent here, so with shadows reduced to two levels the hairline is the *only* thing separating a white card from a near-white page. Compensation, not decoration. */ --color-border: rgba(0, 0, 0, 0.1); --color-border-strong: rgba(0, 0, 0, 0.16); --color-text-primary: rgba(0, 0, 0, 0.92); --color-text-secondary: rgba(0, 0, 0, 0.58); --color-text-tertiary: rgba(0, 0, 0, 0.36); --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: var(--shadow-sm); --shadow-xl: var(--shadow-lg); /* Light surfaces are already white; no lit-from-above hairline needed. */ --surface-highlight: transparent; --scrollbar-thumb: rgba(0, 0, 0, 0.18); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --color-bg: #f4f4f6; --color-bg-elevated: #fafafb; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-surface-hover: #f0f0f2; --color-border: rgba(0, 0, 0, 0.1); --color-border-strong: rgba(0, 0, 0, 0.16); --color-text-primary: rgba(0, 0, 0, 0.92); --color-text-secondary: rgba(0, 0, 0, 0.58); --color-text-tertiary: rgba(0, 0, 0, 0.36); --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: var(--shadow-sm); --shadow-xl: var(--shadow-lg); --surface-highlight: transparent; --scrollbar-thumb: rgba(0, 0, 0, 0.18); } } /* ========================================================================== Minimal palette -------------------------------------------------------------------------- Not "colours off": the semantic pair keeps its *contrast* relationship, it just expresses it in luminance instead of hue. Profit reads as the brighter tone, loss as the recessive one, so a glance still separates the two - which is the whole job green/red was doing. The accent collapses into the same neutral family so the FAB and active states stop being the one saturated thing on screen. Set on as data-palette="minimal" by TJ.Store.applyPalette(), exactly like data-theme and data-density. Charts pick this up for free: they read --color-profit / --color-loss through getComputedStyle. ========================================================================== */ :root[data-palette="minimal"] { --color-profit: rgba(255, 255, 255, 0.95); --color-profit-soft: rgba(255, 255, 255, 0.1); --color-loss: rgba(255, 255, 255, 0.44); --color-loss-soft: rgba(255, 255, 255, 0.05); --color-warning: rgba(255, 255, 255, 0.7); --color-warning-soft: rgba(255, 255, 255, 0.07); --color-accent: rgba(255, 255, 255, 0.82); --color-accent-soft: rgba(255, 255, 255, 0.08); --color-accent-rgb: 255, 255, 255; --color-on-accent: #0c0c0e; } /* Light theme inverts the direction: on a white page the *darker* tone is the assertive one, so profit goes dark and loss recedes toward grey. */ :root[data-palette="minimal"][data-theme="light"] { --color-profit: rgba(0, 0, 0, 0.88); --color-profit-soft: rgba(0, 0, 0, 0.08); --color-loss: rgba(0, 0, 0, 0.4); --color-loss-soft: rgba(0, 0, 0, 0.04); --color-warning: rgba(0, 0, 0, 0.6); --color-warning-soft: rgba(0, 0, 0, 0.06); --color-accent: rgba(0, 0, 0, 0.78); --color-accent-soft: rgba(0, 0, 0, 0.07); --color-accent-rgb: 0, 0, 0; --color-on-accent: #ffffff; } @media (prefers-color-scheme: light) { :root[data-palette="minimal"]:not([data-theme]) { --color-profit: rgba(0, 0, 0, 0.88); --color-profit-soft: rgba(0, 0, 0, 0.08); --color-loss: rgba(0, 0, 0, 0.4); --color-loss-soft: rgba(0, 0, 0, 0.04); --color-warning: rgba(0, 0, 0, 0.6); --color-warning-soft: rgba(0, 0, 0, 0.06); --color-accent: rgba(0, 0, 0, 0.78); --color-accent-soft: rgba(0, 0, 0, 0.07); --color-accent-rgb: 0, 0, 0; --color-on-accent: #ffffff; } } /* ---- Compact density ---- Only the density tokens change; type sizes are untouched. Set on as data-density="compact" by TJ.Store.applyDensity(), mirroring how data-theme works. */ :root[data-density="compact"] { --card-pad: var(--space-4); --row-h: 36px; --stack-gap: var(--space-3); --section-gap: var(--space-5); }