/* ========================================================================== createinvoice.tech — Design Tokens Philosophy: "Warm / human" (derived from Scandinavian: warmth + restraint, functional beauty, accessible by default), warmed with a characterful optical serif for display type. Derived from .design/invoice-generator/DESIGN_BRIEF.md All color pairings verified WCAG AA (see the brief's a11y section). Two color worlds live here: 1. APP UI tokens (--color-*) → warm, human, personable 2. INVOICE DOCUMENT tokens (--inv-*) → "quietly warm professional", restrained so the output stays credible when forwarded to a client. Fonts (load via in , self-host for the privacy story if desired): Display: "Fraunces" (soft optical serif — warmth + craft) Body: "Figtree" (friendly humanist sans — legible, warm, not childish) Mono: "Spline Sans Mono" (tabular figures for amounts) ========================================================================== */ :root { /* ---------- Color · Light (default) ------------------------------------ */ /* Surfaces — warm paper/linen, never stark white for the page */ --color-bg-primary: #FBF7F1; /* page — warm cream */ --color-bg-secondary: #FFFFFF; /* cards / panels */ --color-bg-tertiary: #F3ECE2; /* inputs, wells, table stripes */ --color-bg-inverse: #2B2622; /* inverted blocks */ /* Text — warm charcoal, never pure black */ --color-text-primary: #2B2622; /* 14.0:1 on page */ --color-text-secondary: #6B625A; /* 5.6:1 on page */ --color-text-tertiary: #948A81; /* placeholder/disabled (3.2:1, non-essential) */ --color-text-inverse: #FBF7F1; --color-text-link: #B04A2B; /* 5.1:1 on page */ /* Borders — warm, soft */ --color-border-primary: #E7DCCF; --color-border-secondary:#F0E8DD; --color-border-focus: #B04A2B; /* Accent — terracotta / clay (the single confident warm accent) */ --color-accent-primary: #B04A2B; /* white text = 5.4:1 */ --color-accent-primary-hover: #98401F; /* white text = 6.8:1 */ --color-accent-primary-active: #843718; --color-accent-on: #FFFFFF; /* text/icon color ON the accent */ --color-accent-soft: #F6E7DF; /* tinted accent surface (badges, selection) */ --color-accent-secondary: #4F6F5B; /* muted sage — secondary/quiet actions, white text 5.6:1 */ /* Status */ --color-status-success: #3F7A55; --color-status-warning: #B5811F; --color-status-error: #B23A2E; --color-status-info: #3E6C86; --color-surface-overlay: rgba(43, 38, 34, 0.44); /* modal/sheet backdrop */ /* ---------- Invoice document · Light ("quietly warm professional") ----- */ --inv-paper: #FCFAF6; /* warm paper, not stark white */ --inv-ink: #2B2622; /* 14.4:1 */ --inv-muted: #6B625A; /* labels / meta, 5.7:1 */ --inv-rule: #E4DACB; /* hairline rules & table borders */ --inv-accent: #B04A2B; /* totals / labels / thin accent rule, 5.2:1 — used sparingly */ --inv-zebra: #F5EFE6; /* subtle line-item row stripe */ /* ---------- Spacing (8px base, Scandinavian: generous but not extreme) -- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px ← base */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ --space-12: 16rem; /* 256px */ /* ---------- Typography -------------------------------------------------- */ --font-family-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --font-family-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-family-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace; --font-size-xs: 0.75rem; /* 12px — captions, folio */ --font-size-sm: 0.875rem; /* 14px — labels, meta */ --font-size-base: 1rem; /* 16px — body (also min mobile input, prevents iOS zoom) */ --font-size-md: 1.125rem; /* 18px — lead body */ --font-size-lg: 1.375rem; /* 22px — section headings */ --font-size-xl: 1.75rem; /* 28px */ --font-size-2xl: 2.25rem; /* 36px */ --font-size-3xl: 3rem; /* 48px */ --font-size-4xl: 3.75rem; /* 60px — hero H1 (display) */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Fraunces optical size — warm, readable display cut (self-hosted font varies on opsz + wght) */ --font-display-settings: "opsz" 40; --line-height-tight: 1.15; /* display headings */ --line-height-snug: 1.3; /* sub-headings */ --line-height-normal: 1.55; /* body */ --line-height-relaxed: 1.7; /* long-form SEO copy */ --letter-spacing-tight: -0.02em; /* large display */ --letter-spacing-normal: 0; --letter-spacing-wide: 0.06em; /* all-caps labels */ /* ---------- Layout ----------------------------------------------------- */ --max-width-content: 68ch; /* comfortable reading width for SEO prose */ --max-width-wide: 72rem; /* 1152px — generator two-pane area */ --max-width-page: 80rem; /* 1280px — outer page frame */ --border-radius-sm: 6px; --border-radius-md: 10px; /* inputs, buttons (Scandinavian 8–12px) */ --border-radius-lg: 16px; /* cards, panels */ --border-radius-xl: 24px; /* hero / feature surfaces */ --border-radius-full: 999px; /* pills, avatar, language chip */ /* Soft, warm-tinted shadows (large blur, low opacity) */ --shadow-sm: 0 1px 2px rgba(43, 38, 34, 0.06); --shadow-md: 0 4px 14px rgba(43, 38, 34, 0.08); --shadow-lg: 0 12px 34px rgba(43, 38, 34, 0.10); --shadow-focus: 0 0 0 3px rgba(176, 74, 43, 0.32); /* focus ring (accent, ~AA visible) */ /* ---------- Motion ----------------------------------------------------- */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-settle: cubic-bezier(0.22, 1, 0.36, 1); /* gentle settle, no overshoot */ /* ---------- Breakpoints (reference; use in @media directly) ------------ */ --breakpoint-sm: 375px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; } /* ========================================================================== Dark mode — warm charcoal (NOT pure black), off-white text, lightened accent. Buttons in dark mode use CHARCOAL text on the light accent (6.3:1), not white. ========================================================================== */ :root[data-theme="dark"] { --color-bg-primary: #211E1B; /* warm charcoal page */ --color-bg-secondary: #2A2622; /* cards */ --color-bg-tertiary: #332E29; /* inputs, wells */ --color-bg-inverse: #EDE6DD; --color-text-primary: #EDE6DD; /* off-white, 13.4:1 */ --color-text-secondary: #B3AAA0; /* 7.3:1 */ --color-text-tertiary: #8A8178; /* 4.3:1 */ --color-text-inverse: #211E1B; --color-text-link: #E08A5F; /* 6.3:1 */ --color-border-primary: #423B34; --color-border-secondary:#37312B; --color-border-focus: #E08A5F; --color-accent-primary: #E08A5F; /* charcoal text = 6.3:1 */ --color-accent-primary-hover: #EC9A70; --color-accent-primary-active: #C9744B; --color-accent-on: #211E1B; /* dark text ON accent in dark mode */ --color-accent-soft: #3A2C24; --color-accent-secondary: #7FA98C; --color-status-success: #6FB088; --color-status-warning: #D6A94E; --color-status-error: #E0766A; --color-status-info: #7BAECB; --color-surface-overlay: rgba(0, 0, 0, 0.58); /* Invoice document stays a light "paper" even in dark UI — it represents a printed page and the user is previewing what they'll download. */ --inv-paper: #FCFAF6; --inv-ink: #2B2622; --inv-muted: #6B625A; --inv-rule: #E4DACB; --inv-accent: #B04A2B; --inv-zebra: #F5EFE6; /* Darker, more transparent shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.46); --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(224, 138, 95, 0.40); } /* System preference dark, unless the user explicitly chose light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg-primary: #211E1B; --color-bg-secondary: #2A2622; --color-bg-tertiary: #332E29; --color-bg-inverse: #EDE6DD; --color-text-primary: #EDE6DD; --color-text-secondary: #B3AAA0; --color-text-tertiary: #8A8178; --color-text-inverse: #211E1B; --color-text-link: #E08A5F; --color-border-primary: #423B34; --color-border-secondary:#37312B; --color-border-focus: #E08A5F; --color-accent-primary: #E08A5F; --color-accent-primary-hover: #EC9A70; --color-accent-primary-active: #C9744B; --color-accent-on: #211E1B; --color-accent-soft: #3A2C24; --color-accent-secondary: #7FA98C; --color-status-success: #6FB088; --color-status-warning: #D6A94E; --color-status-error: #E0766A; --color-status-info: #7BAECB; --color-surface-overlay: rgba(0, 0, 0, 0.58); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.46); --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(224, 138, 95, 0.40); } } /* Reduced motion — collapse all durations */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }