/* * Ledgaa design tokens. * Palette is fixed by docs/specs/DESIGN-BRIEF.md section 1, sampled from the * owner's own logo and mockups. Nothing outside this set, no pure white or * pure black anywhere, including for status colour (no green/red hue coding; * direction and alerts read through icon shape and weight instead). */ :root { /* Colour: surfaces */ --color-canvas: #f5f1ed; --color-surface: #faf7f4; --color-surface-alt: #efe8e1; --color-hairline: #e6ddd4; /* Aliases kept so existing markup / older classnames still resolve. */ --color-surface-muted: var(--color-surface-alt); --color-surface-sunken: var(--color-surface-alt); --color-border: var(--color-hairline); --color-border-strong: #d8c8b8; /* Colour: ink */ --color-ink: #2d2e2e; --color-ink-soft: #55524e; --color-ink-faint: #9c8269; --color-ink-on-accent: #faf7f4; --color-muted: #9c8269; /* Colour: accent (terracotta, from the logo mark) */ --color-accent: #c46543; --color-accent-strong: #a94f22; --color-accent-soft: #f0dcd0; --color-accent-tint: var(--color-accent-soft); /* Colour: status, expressed only through the approved palette. Direction is read from icon shape (up/down chevron) and weight, not hue. */ --color-success: var(--color-ink); --color-success-soft: var(--color-surface-alt); --color-warning: var(--color-accent-strong); --color-warning-soft: var(--color-accent-soft); --color-danger: var(--color-accent-strong); --color-danger-soft: var(--color-accent-soft); /* Colour: chat bubbles */ --color-bubble-merchant: var(--color-accent-soft); --color-bubble-merchant-ink: var(--color-ink); --color-bubble-assistant: var(--color-surface); --color-bubble-assistant-ink: var(--color-ink); /* Typography: editorial serif for display moments, clean sans for body. System stacks only, no webfonts. */ --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.5rem; --text-4xl: 3.5rem; --text-5xl: 4.5rem; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Spacing scale. Section rhythm on desktop lives at --space-10/--space-11. */ --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; --space-10: 8rem; --space-11: 9rem; /* Radius: generous everywhere, nothing squared off. */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px; /* Shadow: soft and low opacity, never a hard outline. */ --shadow-sm: 0 1px 2px rgba(45, 46, 46, 0.05); --shadow-md: 0 12px 32px -8px rgba(45, 46, 46, 0.12); --shadow-lg: 0 32px 64px -16px rgba(45, 46, 46, 0.18); --shadow-float: 0 24px 48px -12px rgba(196, 101, 67, 0.22); /* Motion */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --duration-fast: 150ms; --duration-base: 240ms; --duration-slow: 420ms; /* Layout */ --max-width-page: 1180px; --max-width-copy: 1040px; --sidebar-width: 260px; --summary-rail-width: 300px; --tap-target-min: 44px; } /* ── Dark mode ─────────────────────────────────────────────────── */ /* Applied via data-theme="dark" on , toggled by JS and persisted in localStorage. Same design system, inverted palette. */ [data-theme="dark"] { --color-canvas: #1a1918; --color-surface: #242322; --color-surface-alt: #2e2d2b; --color-hairline: #3d3b38; --color-border: #3d3b38; --color-border-strong: #5a5753; --color-ink: #ede8e3; --color-ink-soft: #b8b0a6; --color-ink-faint: #7a7268; --color-ink-on-accent: #faf7f4; --color-muted: #7a7268; --color-accent: #d4764f; --color-accent-strong: #e08a5f; --color-accent-soft: #3d2a22; --color-accent-tint: #3d2a22; --color-success: #ede8e3; --color-success-soft: #2e2d2b; --color-warning: #e08a5f; --color-warning-soft: #3d2a22; --color-danger: #e08a5f; --color-danger-soft: #3d2a22; --color-bubble-merchant: #3d2a22; --color-bubble-merchant-ink: #ede8e3; --color-bubble-assistant: #2e2d2b; --color-bubble-assistant-ink: #ede8e3; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.35); --shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.45); }