/* ================================================================= easiBooks design tokens · eb-tokens.css ----------------------------------------------------------------- The ONLY place colors, type, spacing and radii are defined. Every other stylesheet uses var(--eb-*): never a raw hex value. Theme switching: - Default follows the device (prefers-color-scheme). - or overrides it (set by js/theme.js from the user's choice). Load order: eb-tokens.css → eb-app.css → {page}.css ================================================================= */ :root { color-scheme: light; /* ---- Surfaces ------------------------------------------------ */ --eb-bg: #F5F3EE; /* page ground (warm paper) */ --eb-bg-sidebar: #F1EEE7; /* side navigation */ --eb-surface: #FFFFFF; /* cards, tables, inputs */ --eb-surface-2: #FAF9F6; /* table header / footer strips */ --eb-surface-hover: #FBFAF7; /* row hover */ --eb-overlay: rgba(23, 32, 27, 0.45); /* ---- Lines --------------------------------------------------- */ --eb-line: #E3DFD6; /* card + section borders */ --eb-line-soft: #EFECE5; /* row dividers */ --eb-line-strong: #D6D1C6; /* input + secondary btn borders */ --eb-line-hover: #A9A397; /* ---- Text ---------------------------------------------------- */ --eb-ink: #17201B; /* primary text */ --eb-ink-2: #4A544E; /* secondary text (≥ 7:1) */ --eb-ink-3: #66706A; /* labels, captions (≥ 4.5:1) */ --eb-ink-disabled: #8A928D; --eb-ink-body: #3A443E; /* long-form paragraphs */ /* ---- Brand --------------------------------------------------- */ --eb-primary: #163326; /* primary button background */ --eb-primary-hover: #24533D; --eb-on-primary: #FFFFFF; --eb-link: #24533D; /* links, active nav, accents */ --eb-link-hover: #163326; --eb-selected-bg: #E3EEE7; /* active nav item, selected row */ --eb-selected-fg: #163326; --eb-brand-dot: #B8862B; /* wordmark dot, brass accent */ --eb-focus: #24533D; /* ---- Status (bg = pill/banner fill, fg = its text, dot = marker) */ --eb-positive-bg: #E3EEE7; --eb-positive-fg: #1D5A3A; --eb-positive-dot: #2E7A50; --eb-warning-bg: #F6EBD3; --eb-warning-fg: #6E4C0E; --eb-warning-dot: #B8862B; --eb-negative-bg: #F8E4E0; --eb-negative-fg: #8E2B20; --eb-negative-dot: #B5402F; --eb-info-bg: #E2EBF5; --eb-info-fg: #1F4470; --eb-info-dot: #2C5A8C; --eb-neutral-bg: #ECE8DF; --eb-neutral-fg: #4A544E; --eb-neutral-dot: #66706A; /* Tinted panels (callouts, "needs attention" cards) */ --eb-negative-panel: #FDF6F4; --eb-negative-panel-line: #F0D2CB; --eb-positive-panel: #F2F7F3; --eb-positive-panel-line: #CFE2D5; --eb-warning-panel: #FBF4E4; --eb-warning-panel-line: #EAD6A8; /* ---- Charts -------------------------------------------------- */ --eb-chart-line: #24533D; --eb-chart-area: #E3EEE7; --eb-chart-grid: #EFECE5; --eb-chart-1: #24533D; /* aging: current */ --eb-chart-2: #B8862B; /* aging: 1–30 */ --eb-chart-3: #C4673A; /* aging: 31–60 */ --eb-chart-4: #8E2B20; /* aging: 61–90 + */ /* ---- Elevation ----------------------------------------------- */ --eb-shadow-sheet: 0 1px 2px rgba(23, 32, 27, 0.04), 0 8px 24px rgba(23, 32, 27, 0.06); --eb-shadow-pop: 0 8px 28px rgba(23, 32, 27, 0.14); /* ---- Type ---------------------------------------------------- */ --eb-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --eb-font-ui: 'Geist', 'Segoe UI', system-ui, sans-serif; --eb-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Scale: nothing below 12px (house floor is 11px; we keep 12) */ --eb-text-xs: 12px; /* labels, pills, column headers */ --eb-text-sm: 13px; /* captions, helper text */ --eb-text-md: 14px; /* UI + table text */ --eb-text-body: 15px; /* body copy */ --eb-text-lg: 18px; /* section headings */ --eb-text-xl: 22px; /* card numbers */ --eb-text-2xl: 28px; /* KPI numbers */ --eb-text-3xl: 36px; /* page titles (display) */ /* ---- Spacing (4px grid) -------------------------------------- */ --eb-space-1: 4px; --eb-space-2: 8px; --eb-space-3: 12px; --eb-space-4: 16px; --eb-space-5: 20px; --eb-space-6: 24px; --eb-space-8: 32px; --eb-space-10: 40px; --eb-space-12: 48px; /* ---- Radii & sizes ------------------------------------------- */ --eb-radius-sm: 6px; --eb-radius-md: 8px; /* buttons, inputs */ --eb-radius-lg: 12px; /* cards */ --eb-radius-pill: 999px; --eb-control-h: 40px; /* buttons + inputs */ --eb-touch-h: 44px; /* min touch target on phone */ --eb-sidebar-w: 248px; } /* ---- Dark values: shared by the two selectors below ------------- */ /* Kept in sync manually: (1) device preference, (2) explicit choice. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --eb-bg: #121714; --eb-bg-sidebar: #0E1310; --eb-surface: #1A201C; --eb-surface-2: #1F2621; --eb-surface-hover: #222A25; --eb-overlay: rgba(0, 0, 0, 0.6); --eb-line: #2E3731; --eb-line-soft: #262E29; --eb-line-strong: #3A443E; --eb-line-hover: #5E6862; --eb-ink: #E8ECE9; --eb-ink-2: #A9B3AD; --eb-ink-3: #8C968F; --eb-ink-disabled: #6F7973; --eb-ink-body: #C3CBC6; --eb-primary: #2E7D52; --eb-primary-hover: #276D47; --eb-on-primary: #FFFFFF; --eb-link: #8CCBA3; --eb-link-hover: #B3DEC2; --eb-selected-bg: #1E3328; --eb-selected-fg: #9AD3AE; --eb-brand-dot: #D3A24A; --eb-focus: #8CCBA3; --eb-positive-bg: #1E3328; --eb-positive-fg: #8CD3A6; --eb-positive-dot: #5DBB86; --eb-warning-bg: #3A2F17; --eb-warning-fg: #E7C27A; --eb-warning-dot: #D3A24A; --eb-negative-bg: #3D201B; --eb-negative-fg: #F2A091; --eb-negative-dot: #E0705C; --eb-info-bg: #1B2A3B; --eb-info-fg: #9CC0EA; --eb-info-dot: #6E9FD6; --eb-neutral-bg: #2A322D; --eb-neutral-fg: #A9B3AD; --eb-neutral-dot: #8C968F; --eb-negative-panel: #241816; --eb-negative-panel-line: #52302A; --eb-positive-panel: #17251D; --eb-positive-panel-line: #2D4A39; --eb-warning-panel: #221D12; --eb-warning-panel-line: #574522; --eb-chart-line: #8CCBA3; --eb-chart-area: #1E3328; --eb-chart-grid: #262E29; --eb-chart-1: #4FA374; --eb-chart-2: #D3A24A; --eb-chart-3: #D98557; --eb-chart-4: #E0705C; --eb-shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35); --eb-shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { color-scheme: dark; --eb-bg: #121714; --eb-bg-sidebar: #0E1310; --eb-surface: #1A201C; --eb-surface-2: #1F2621; --eb-surface-hover: #222A25; --eb-overlay: rgba(0, 0, 0, 0.6); --eb-line: #2E3731; --eb-line-soft: #262E29; --eb-line-strong: #3A443E; --eb-line-hover: #5E6862; --eb-ink: #E8ECE9; --eb-ink-2: #A9B3AD; --eb-ink-3: #8C968F; --eb-ink-disabled: #6F7973; --eb-ink-body: #C3CBC6; --eb-primary: #2E7D52; --eb-primary-hover: #276D47; --eb-on-primary: #FFFFFF; --eb-link: #8CCBA3; --eb-link-hover: #B3DEC2; --eb-selected-bg: #1E3328; --eb-selected-fg: #9AD3AE; --eb-brand-dot: #D3A24A; --eb-focus: #8CCBA3; --eb-positive-bg: #1E3328; --eb-positive-fg: #8CD3A6; --eb-positive-dot: #5DBB86; --eb-warning-bg: #3A2F17; --eb-warning-fg: #E7C27A; --eb-warning-dot: #D3A24A; --eb-negative-bg: #3D201B; --eb-negative-fg: #F2A091; --eb-negative-dot: #E0705C; --eb-info-bg: #1B2A3B; --eb-info-fg: #9CC0EA; --eb-info-dot: #6E9FD6; --eb-neutral-bg: #2A322D; --eb-neutral-fg: #A9B3AD; --eb-neutral-dot: #8C968F; --eb-negative-panel: #241816; --eb-negative-panel-line: #52302A; --eb-positive-panel: #17251D; --eb-positive-panel-line: #2D4A39; --eb-warning-panel: #221D12; --eb-warning-panel-line: #574522; --eb-chart-line: #8CCBA3; --eb-chart-area: #1E3328; --eb-chart-grid: #262E29; --eb-chart-1: #4FA374; --eb-chart-2: #D3A24A; --eb-chart-3: #D98557; --eb-chart-4: #E0705C; --eb-shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35); --eb-shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5); }