/* ============================================================================= MYOPTIONSFLOW — DESIGN SYSTEM CSS Custom Properties: single source of truth for all brand tokens. All component and utility files must reference these variables only — never hardcode colours, fonts, radii, or shadows outside this file. Theme switching: toggle data-theme="dark" on to activate dark mode. ============================================================================= */ /* ───────────────────────────────────────────── LIGHT THEME (default) ───────────────────────────────────────────── */ :root { /* ── Semantic financial colours ───────────── These never change between light and dark. They are the brand's core signal colours. */ --color-profit: #00C805; --color-profit-bg: #f0fdf0; --color-profit-border: #bbf7bb; --color-profit-text: #007a04; /* darker shade for text on light bg */ --color-loss: #FF3B30; --color-loss-bg: #fff1f0; --color-loss-border: #ffc9c5; --color-loss-text: #cc1a10; --color-warning: #FF9500; --color-warning-bg: #fff7ed; --color-warning-border: #fed7aa; --color-warning-text: #c46b00; --color-action: #007AFF; --color-action-bg: rgba(0, 122, 255, 0.08); --color-action-border: rgba(0, 122, 255, 0.35); --color-action-hover: #0066dd; --color-purple: #7C3AED; --color-purple-bg: rgba(124, 58, 237, 0.08); --color-purple-border: rgba(124, 58, 237, 0.25); /* ── Risk / DTE semantic aliases ──────────── */ --color-risk-high: var(--color-loss); --color-risk-med: var(--color-warning); --color-risk-low: var(--color-profit); /* ── Selector deviation (changed from default) */ --color-deviation: #FF9500; --color-deviation-bg: rgba(255, 149, 0, 0.08); --color-deviation-border:rgba(255, 149, 0, 0.45); /* ── Global surfaces ──────────────────────── */ --bg-global: #F2F4F7; --bg-surface: #FFFFFF; --bg-surface-alt: #F9FAFB; /* zebra rows, filter bars, sub-sections */ --bg-surface-raised: #FFFFFF; /* modals, dropdowns */ /* ── Sidebar ──────────────────────────────── */ --bg-sidebar: #0f172a; /* slate-900 */ --border-sidebar: #1E293B; /* slate-800 */ --text-sidebar: #94A3B8; /* slate-400 */ --text-sidebar-hover: #FFFFFF; --text-sidebar-active: #FFFFFF; --bg-sidebar-hover: #1e293b; --bg-sidebar-active: #2563eb; /* blue-600 */ --bg-sidebar-section: #475569; /* section label colour */ /* ── Header ───────────────────────────────── */ --bg-header: #FFFFFF; /* ── Text ─────────────────────────────────── */ --text-primary: #1A1C1E; --text-secondary: #667085; --text-tertiary: #94A3B8; --text-muted: #CBD5E1; --text-inverse: #FFFFFF; /* ── Borders & dividers ───────────────────── */ --border-color: #E4E7EC; --border-strong: #CBD5E1; --border-focus: var(--color-action); /* ── Section priority row backgrounds ────── Used by .section-priority-1/2/3 classes */ --priority-1-bg: #fee2e2; /* red-100 */ --priority-1-text: #991b1b; /* red-800 */ --priority-1-border: #fecaca; --priority-2-bg: #ffedd5; /* orange-100 */ --priority-2-text: #9a3412; /* orange-800 */ --priority-2-border: #fed7aa; --priority-3-bg: #f3f4f6; /* gray-100 */ --priority-3-text: #374151; /* gray-700 */ --priority-3-border: #e5e7eb; /* ── Table special rows ───────────────────── */ --row-stock-highlight: #eff6ff; /* blue-50 */ --row-subtotal-bg: #f0f9ff; /* sky-100 */ --row-subtotal-text: #0c4a6e; /* sky-800 */ --row-subtotal-border: #bae6fd; /* sky-300 */ --row-grand-total-bg: #dcfce7; /* green-100 */ --row-grand-total-text: #15803d; /* green-700 */ --row-grand-total-border:#4ade80; /* green-400 */ --row-account-header-bg: #e0e7ff; /* indigo-200 */ --row-account-header-text:#3730a3; /* indigo-800 */ --row-today-bg: rgba(255, 149, 0, 0.05); --row-today-font-weight: 600; --row-period-bg: rgba(0, 122, 255, 0.05); --row-period-text: var(--color-action); --row-section-div-bg: #e5e7eb; /* gray-200 */ --row-section-div-text: #1f2937; --row-highlight-metric-bg: #fefce8; /* yellow-50 */ --row-highlight-metric-text: #a16207; /* yellow-700 */ /* ── Typography ───────────────────────────── */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-financial: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', monospace; --text-size-xs: 0.75rem; /* 12px */ --text-size-sm: 0.875rem; /* 14px */ --text-size-base: 1rem; /* 16px */ --text-size-lg: 1.125rem; /* 18px */ --text-size-xl: 1.25rem; /* 20px */ --text-size-2xl: 1.5rem; /* 24px */ --text-size-kpi: 1.5rem; /* KPI headline values */ --text-size-kpi-label: 0.7rem; /* KPI card labels */ /* ── Shadows ──────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.15); --shadow-focus: 0 0 0 3px var(--color-action-bg); /* ── Border radii ─────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ── Sidebar dimensions ───────────────────── */ --sidebar-w-collapsed: 64px; --sidebar-w-expanded: 240px; /* ── Transitions ──────────────────────────── */ --transition-fast: all 0.15s ease; --transition-std: all 0.2s ease; --transition-sidebar: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-sidebar-content: opacity 0.15s ease 0.1s; /* ── Z-index scale ────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 40; --z-sidebar: 50; --z-modal: 60; } /* ───────────────────────────────────────────── DARK THEME Override only what changes — semantic colours (profit/loss/warning/action) are intentionally unchanged: they must stay readable on any bg. ───────────────────────────────────────────── */ :root[data-theme='dark'] { /* Surfaces */ --bg-global: #0A111A; --bg-surface: #111C2A; --bg-surface-alt: #162231; --bg-surface-raised: #1a2d44; --bg-header: #111C2A; /* Text */ --text-primary: #F1F5F9; --text-secondary: #94A3B8; --text-tertiary: #64748B; --text-muted: #334155; /* Borders */ --border-color: #1E293B; --border-strong: #2D3F55; /* Semantic colour backgrounds (soften for dark surfaces) */ --color-profit-bg: rgba(0, 200, 5, 0.12); --color-profit-border: rgba(0, 200, 5, 0.25); --color-profit-text: #00C805; --color-loss-bg: rgba(255, 59, 48, 0.12); --color-loss-border: rgba(255, 59, 48, 0.25); --color-loss-text: #FF3B30; --color-warning-bg: rgba(255, 149, 0, 0.12); --color-warning-border: rgba(255, 149, 0, 0.25); --color-warning-text: #FF9500; --color-action: #4DA6FF; /* lighter blue — readable on dark surfaces */ --color-action-hover: #6DBAFF; --color-action-bg: rgba(77, 166, 255, 0.12); --color-action-border: rgba(77, 166, 255, 0.35); --color-purple-bg: rgba(124, 58, 237, 0.12); --color-purple-border: rgba(124, 58, 237, 0.25); --color-deviation-bg: rgba(255, 149, 0, 0.12); --color-deviation-border:rgba(255, 149, 0, 0.4); /* Section priority rows */ --priority-1-bg: rgba(220, 38, 38, 0.15); --priority-1-text: #fca5a5; --priority-1-border: rgba(220, 38, 38, 0.3); --priority-2-bg: rgba(234, 88, 12, 0.15); --priority-2-text: #fdba74; --priority-2-border: rgba(234, 88, 12, 0.3); --priority-3-bg: rgba(255, 255, 255, 0.04); --priority-3-text: #cbd5e1; --priority-3-border: rgba(255, 255, 255, 0.08); /* Table special rows */ --row-stock-highlight: rgba(77, 166, 255, 0.08); --row-subtotal-bg: rgba(77, 166, 255, 0.1); --row-subtotal-text: #7dd3fc; --row-subtotal-border: rgba(14, 165, 233, 0.2); --row-grand-total-bg: rgba(0, 200, 5, 0.1); --row-grand-total-text: #86efac; --row-grand-total-border:rgba(0, 200, 5, 0.2); --row-account-header-bg: rgba(99, 102, 241, 0.12); --row-account-header-text:#a5b4fc; --row-today-bg: rgba(255, 149, 0, 0.08); --row-period-bg: rgba(77, 166, 255, 0.08); --row-section-div-bg: rgba(255, 255, 255, 0.05); --row-section-div-text: #e2e8f0; --row-highlight-metric-bg: rgba(234, 179, 8, 0.1); --row-highlight-metric-text: #fde047; /* Shadows (stronger contrast on dark bg) */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.4); --shadow-focus: 0 0 0 3px rgba(0, 122, 255, 0.25); }