/* ============================================================================ AMANAH — Design tokens A private ledger, not a dashboard: ivory surface, charcoal ink, one restrained emerald accent. Amounts always set in a tabular mono face, right-aligned — the one place the interface visibly does arithmetic. Dark mode redefines the same variable names under two selectors below rather than introducing new ones, so every component/page CSS file that already writes var(--ivory), var(--ink), etc. gets the dark palette automatically — nothing outside this file needs to know dark mode exists. It follows the OS setting by default (prefers-color-scheme) and can be pinned either way by JS setting data-theme="dark" or data-theme="light" on (see theme.js) — the attribute selectors are written to win over the media query either direction, so an explicit user choice always overrides the OS. ============================================================================ */ :root { /* ---- Color: surface ------------------------------------------------- */ --ivory: #F7F5EF; /* primary surface */ --ivory-raised: #FFFFFF; /* cards, inputs */ --charcoal-deep: #15140F; /* nav / footer — darkest element in both themes */ /* ---- Color: ink ------------------------------------------------------ */ --ink: #1B1A16; /* primary text — deep charcoal, near-black */ --ink-soft: #5B584D; /* secondary text */ --ink-faint: #747064; /* placeholders, disabled — 4.5:1+ on ivory/white */ --ink-on-dark: #F3F0E6; /* text on charcoal-deep (nav/footer, both themes) */ --ink-on-dark-soft: #B4AF9E; /* Fixed across both themes — same reasoning as charcoal-deep above. --danger itself DOES (correctly) change between themes, tuned as text/borders sitting on the page surface; that's a different job from being a solid fill behind white text, which needs its own value that doesn't have to also work as body-text-on-dark-bg. */ --danger-solid: #8C3B2E; /* 6.6:1+ with --ink-on-dark text */ /* ---- Color: accent ---------------------------------------------------- One restrained emerald, used for primary actions and the "settled" state only — never decoration. */ --emerald: #1E6B52; --emerald-strong: #144F3C; --emerald-tint: #E3EEE7; /* Fixed across both themes, same reasoning as charcoal-deep/danger-solid above — this is specifically the *solid fill* behind fixed white button text (.btn-primary), a different job from --emerald's other role as accent/link color directly on the page background, which does need to brighten in dark mode for its own contrast reasons. Reusing --emerald for both was the bug: its dark-mode value (bright, correct for text-on-dark-surface) fails badly as a solid fill under white text (2.7:1, should be 4.5:1+). */ --emerald-solid: #1E6B52; /* 5.6:1+ with --ink-on-dark text, both themes */ --emerald-solid-hover: #164F3D; /* ---- Color: status (muted, not traffic-light) ------------------------ Outstanding is simply a fact, not an alarm — neutral ink, not red. Partial gets a quiet, earthen amber. Settled gets the one accent. */ --status-outstanding: var(--ink-soft); --status-outstanding-bg: #EDEAE0; --status-partial: #7D5A1F; /* 4.5:1+ on its pill bg */ --status-partial-bg: #F1E7D1; --status-settled: var(--emerald); --status-settled-bg: var(--emerald-tint); /* ---- Color: lines & feedback ------------------------------------------ */ --line: #DFD9C8; --line-soft: #EAE5D8; --danger: #8C3B2E; --danger-bg: #F3E4DF; --focus-ring: #1E6B52; /* ---- Select arrow ------------------------------------------------------- A data-URI needs its fill baked in as a literal hex, not var(--ink-soft) — url() can't resolve custom properties. Defining the whole background-image as its own token (redefined per theme below, same pattern as every other color here) keeps components.css theme-agnostic instead of hardcoding a light-mode-only fill that goes invisible-on-dark, which is what shipped before this: bug was a dark charcoal chevron sitting on a dark charcoal dropdown in dark mode. Fill hex mirrors --ink-soft's value in each theme. */ --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235B584D' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); /* ---- Type: families --------------------------------------------------- Display/heading: Fraunces — a humanist serif with real character, used sparingly, never for body copy. Body: IBM Plex Sans — clean, legible, slightly technical. Ledger/numeric: IBM Plex Mono, tabular — every amanah amount is set in this face, right-aligned, like a figure in a paper ledger. */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* ---- Type: scale ------------------------------------------------------- Fluid-ish scale on a ~1.25 ratio, clamped for mobile. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); --text-2xl: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; /* ---- Spacing (4px base) ------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- Radius ------------------------------------------------------------ Small and deliberate — a private ledger, not a rounded SaaS bubble. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ---- Elevation ----------------------------------------------------------- */ --shadow-card: 0 1px 2px rgba(27, 26, 22, 0.06), 0 1px 1px rgba(27, 26, 22, 0.04); --shadow-raised: 0 8px 24px rgba(27, 26, 22, 0.12), 0 2px 6px rgba(27, 26, 22, 0.06); /* ---- Motion -------------------------------------------------------------- 150–250ms ease-out, calm, never bouncy. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 250ms; /* ---- Layout ---------------------------------------------------------------- */ --content-width: 40rem; --page-width: 72rem; --nav-height: 3.75rem; } /* ============================================================================ Dark mode — same warm, low-contrast-of-hue identity as light mode, not a cold true-black flip. charcoal-deep (nav/footer) stays the single darkest element in both themes; the page surface below sits one subtle step lighter than it, and raised cards a step lighter again — same layered relationship as light mode, inverted, so the nav still reads as a grounding band instead of disappearing into the page. Every value below was checked against WCAG AA (4.5:1 for normal text) on both --ivory and --ivory-raised as they're redefined here. ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ivory: #1A1812; --ivory-raised: #232019; --ink: #F1EDE2; --ink-soft: #B8B2A0; --ink-faint: #928C77; /* 4.83:1 on ivory, 4.46->4.96:1 on ivory-raised */ --emerald: #4FA184; /* brighter than light mode's #1E6B52 — needs to read as the accent against dark, not muddy into it */ --emerald-strong: #6BB89D; --emerald-tint: #1D3229; --status-outstanding: var(--ink-soft); --status-outstanding-bg: #2C2921; --status-partial: #D9A857; --status-partial-bg: #332A17; --status-settled: var(--emerald); --status-settled-bg: var(--emerald-tint); --line: #39352A; --line-soft: #2C2921; --danger: #D97D6C; --danger-bg: #33211D; --focus-ring: #4FA184; --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23B8B2A0' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2); --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); /* Tells the browser's own UI (native date pickers, scrollbars, form control chrome, autofill highlight) to render dark too — without this it stayed hardcoded to 'light' in base.css regardless of which theme was actually active, so e.g. a date input's calendar popup showed as a jarring light rectangle in an otherwise dark page. */ color-scheme: dark; } } /* Manual override: explicit user choice wins over the OS setting either direction, regardless of prefers-color-scheme. */ :root[data-theme="dark"] { --ivory: #1A1812; --ivory-raised: #232019; --ink: #F1EDE2; --ink-soft: #B8B2A0; --ink-faint: #928C77; --emerald: #4FA184; --emerald-strong: #6BB89D; --emerald-tint: #1D3229; --status-outstanding: var(--ink-soft); --status-outstanding-bg: #2C2921; --status-partial: #D9A857; --status-partial-bg: #332A17; --status-settled: var(--emerald); --status-settled-bg: var(--emerald-tint); --line: #39352A; --line-soft: #2C2921; --danger: #D97D6C; --danger-bg: #33211D; --focus-ring: #4FA184; --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23B8B2A0' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2); --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } }