/* ============================================================ tokens.css — the single source of truth for visual decisions. Phase 2 of the GUI modernization. Every colour, size, space and timing used anywhere in the app should come from a variable declared here. Nothing else should contain a raw hex value. LEGACY ALIASES: the existing JavaScript writes inline styles referencing --red, --amber, --muted, --line, --panel2, --text, --green and --accent. Those names are kept and re-pointed at the new tokens so all 68 existing screens keep working while they are migrated page by page. Do not delete them until the feature map shows every screen migrated. ============================================================ */ :root { /* ---------- surfaces ---------- */ --color-bg: #F3F6FA; /* app canvas */ --color-surface: #FFFFFF; /* cards, tables, drawers */ --color-surface-2: #F0F4F8; /* inputs, subtle fills, hover */ --color-surface-3: #E6ECF2; /* pressed, track */ --color-border: #E2E8EF; /* dividers, input borders */ --color-border-strong: #C9D4DF; /* emphasized separation */ /* ---------- text ---------- */ --text-primary: #16233A; --text-secondary: #5C6B82; --text-tertiary: #93A0B2; --text-inverse: #FFFFFF; /* ---------- brand / action ---------- */ --color-primary: #17529E; --color-primary-hover: #124384; --color-primary-active: #0F386E; --color-primary-soft: #E8F0FA; /* tinted background */ --color-primary-border: #BDD5EF; /* ---------- semantic (meaning, never decoration) ---------- */ --color-success: #0F7B4F; --color-success-soft: #E6F4EC; --color-success-border: #B7E0C9; --color-warning: #B25E09; --color-warning-soft: #FDF3E5; --color-warning-border: #F0D3AC; --color-danger: #B42318; --color-danger-hover: #99190F; --color-danger-soft: #FDECEA; --color-danger-border: #F3C6C1; --color-info: #175CD3; --color-info-soft: #EAF0FC; --color-info-border: #C2D6F5; --color-neutral: #475467; --color-neutral-soft: #F0F4F8; --color-neutral-border: #C9D4DF; /* ---------- typography ---------- */ --font-sans: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; --text-page-title: 26px; /* h1 / page header */ --text-section: 17px; /* section headings */ --text-subhead: 15px; --text-body: 14px; /* default */ --text-sm: 13px; --text-xs: 12px; /* labels, captions */ --text-2xs: 11px; /* badges, table headers */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-loose: 1.65; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- spacing (4px base) ---------- */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* ---------- radius ---------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---------- elevation (two levels only) ---------- */ --shadow-sm: 0 1px 2px rgba(16, 33, 61, .06); --shadow-md: 0 6px 16px rgba(16, 33, 61, .09); --shadow-lg: 0 16px 40px rgba(16, 33, 61, .15); /* ---------- focus ---------- */ --focus-ring: 0 0 0 3px rgba(23, 82, 158, .22); /* ---------- motion ---------- */ --ease: cubic-bezier(.2, 0, .2, 1); --dur-fast: 120ms; --dur-base: 180ms; /* ---------- component sizing ---------- */ --control-h-sm: 30px; --control-h-md: 36px; --control-h-lg: 42px; --sidebar-w: 236px; --sidebar-w-collapsed: 60px; --header-h: 56px; --content-max: 1600px; /* table density (overridden by .density-* on the table wrapper) */ --row-pad-y: 8px; --row-pad-x: 12px; /* ============================================================ LEGACY ALIASES — required by existing inline styles in JS. Re-pointed from the old dark palette to the new light one. ============================================================ */ /* ---------- deep text on soft semantic fills (messages) ---------- */ --color-success-text: #0A5C3B; --color-danger-text: #8C1A11; --color-warning-text: #8A4907; --color-info-text: #12439B; /* ---------- the Tally-format reports (TB / P&L / BS) ---------- The GROUP STRUCTURE stays exactly as Tally shows it (Capital Account, Fixed Assets, Sundry Debtors...). Only the surface changed: these used to be a cream 'paper ledger' pastiche, which clashed with the rest of the interface. They now chain to the system tokens, so the reports match whichever theme is active -- and the print override reaches them automatically through the same chain. */ --tally-paper: var(--color-surface); --tally-ink: var(--text-primary); --tally-ink-soft: var(--text-secondary); --tally-ink-faint: var(--text-secondary); --tally-line: var(--color-border-strong); --tally-head: var(--color-primary); --tally-head-text: var(--text-inverse); --tally-sub: var(--color-primary-soft); --tally-band: var(--color-surface-2); --tally-grp: var(--color-primary-soft); --tally-colhead: var(--color-surface-3); --tally-colhead-text: var(--text-primary); /* ---------- figures palette ---------- The EXACT colours the screens have always painted inline (status text, confidence bars, chips). Declared as tokens with these same values so light mode does not shift by a single shade, and night mode can supply legible equivalents. */ --fig-red: #c0392b; /* #1f8a55 and #b5730c were the original figure colours; both measured just under the 4.5:1 WCAG floor on white (4.4 and 3.9). Darkened by the smallest step that passes -- 2% and 9% -- which the eye does not notice but the standard does. */ --fig-green: #1E8753; --fig-amber: #A5690B; --fig-blue: #5560d0; --fig-gray: #697386; --fig-teal: #2f7d6b; --fig-orange: #c77d00; --fig-purple: #8a56c0; --fig-sky: #5b9bd5; --fig-sky-text: #04121e; --fig-link: #0645ad; --bg: var(--color-bg); --panel: var(--color-surface); --panel2: var(--color-surface-2); --line: var(--color-border); --text: var(--text-primary); --muted: var(--text-secondary); --accent: var(--color-primary); --accent2: var(--color-primary); --green: var(--color-success); --red: var(--color-danger); --amber: var(--color-warning); --radius: var(--radius-lg); } /* ============================================================ NIGHT MODE One attribute on (data-theme="dark") re-points the same variables at dark values. Nothing else changes: no second stylesheet is fetched, no script runs per screen, and every rule below costs the browser the same one variable lookup it already performs in the light theme. Toggling is a repaint, not a reload. Values are chosen for ledger work at night: true dark surfaces (not grey), slightly desaturated text so columns of figures do not glare, and semantic colours lifted just enough to keep red/green/amber meanings legible on dark ground. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* native selects, scrollbars, date pickers */ --color-bg: #101418; --color-surface: #171D24; --color-surface-2: #1F2730; --color-surface-3: #2A343F; --color-border: #2B3540; --color-border-strong: #3B4754; --text-primary: #E7ECF2; --text-secondary: #9AA7B4; --text-tertiary: #6E7A87; --text-inverse: #101418; --color-primary: #6BA6E8; --color-primary-hover: #82B5EC; --color-primary-active: #5895DB; --color-primary-soft: #182A40; --color-primary-border: #2B4A6E; --color-success: #43B581; --color-success-soft: #12271C; --color-success-border: #1F4632; --color-success-text: #6FD0A2; --color-warning: #E0A64F; --color-warning-soft: #2C2113; --color-warning-border: #574020; --color-warning-text: #EDBE79; --color-danger: #EE7B6E; --color-danger-hover: #F29387; --color-danger-soft: #331B18; --color-danger-border: #5C2E28; --color-danger-text: #F4A196; --color-info: #7AA7F0; --color-info-soft: #17243A; --color-info-border: #2B4570; --color-info-text: #A3C1F5; --color-neutral: #9AA7B4; --color-neutral-soft: #232C35; --color-neutral-border: #3B4754; /* shadows read as depth on dark only when they are darker still */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6); --focus-ring: 0 0 0 3px rgba(107, 166, 232, .3); /* deep text on soft fills */ /* (set above per semantic colour) */ /* tally tokens need no dark values: they chain to the system tokens above, so the reports follow the theme automatically */ /* figures palette, lifted for dark ground */ --fig-red: #ED8578; --fig-green: #55C08C; --fig-amber: #DFA84E; --fig-blue: #98A0EC; --fig-gray: #93A0AE; --fig-teal: #58B6A0; --fig-orange: #E0A64F; --fig-purple: #B490DD; --fig-sky: #3E70A3; --fig-sky-text: #E7ECF2; --fig-link: #7AA7F0; } /* Printing always uses the light palette: a report printed at night must come out identical to one printed at noon. */ @media print { :root[data-theme="dark"] { color-scheme: light; --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F0F4F8; --color-border: #E2E8EF; --color-border-strong: #C9D4DF; --text-primary: #16233A; --text-secondary: #5C6B82; --color-surface-3: #E6ECF2; --color-primary: #17529E; --color-primary-soft: #E8F0FA; --text-inverse: #FFFFFF; /* tally tokens chain to the values above */ } }