/* ============================================================================= ORCHA DESIGN SYSTEM — design-system.css (finance-app copy) Orcha v2 · LIGHT MODE ----------------------------------------------------------------------------- This is the finance app's copy of the design-system tokens. The source of truth lives at /design-system/tokens/design-system.css; this copy is identical except the @font-face url()s point at the app's /public/fonts/ path. Mirror any token change from the source file into here. This is the single source of truth for the Orcha light-mode design system. It is `colors_and_type.css` (the primitive + semantic token set) with the open decisions from DESIGN_DECISIONS.md §7 resolved into canonical values: · --bg-canvas lightened #f6f4ef → #f9f7f3 (subtler against white cards) · --bg-inset repointed to white (the "flat sub-content" decision) · --r-lg / --r-md / --r-sm tightened 8/6/4 → 6/5/3 (dense-tool corners) Two layers of variables: 1. PRIMITIVES — raw palette + scales (stone-*, azure-*, green-*, …) 2. SEMANTIC — role tokens (--fg, --bg, --border, --brand, --success, …) plus type roles (--text-h1, --text-body, --text-label, …) Fonts: BRAND WEBFONTS, self-hosted variable TTFs served from /public/fonts/. · Source Serif 4 — display & headings (editorial, the brand's serif voice) · Source Sans 3 — all UI / body / labels (the workhorse) · JetBrains Mono — amounts, IBANs, IDs, code ========================================================================== */ @font-face { font-family: 'Source Serif 4'; src: url('/public/fonts/SourceSerif4.ttf') format('truetype'); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url('/public/fonts/SourceSans3.ttf') format('truetype'); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/public/fonts/JetBrainsMono.ttf') format('truetype'); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* --------------------------------------------------------------------------- 1 · PRIMITIVES ------------------------------------------------------------------------ */ /* Neutral — WARM STONE scale. Light mode is paper-warm, not cold grey: every step carries a taupe/sand undertone so whites read warm and ink reads as warm-black. This is the product's true neutral. */ --stone-50: #faf9f6; --stone-100: #f6f4ef; --stone-150: #ece8e1; /* interpolated — hover fills */ --stone-200: #e3ded5; --stone-300: #d2ccc0; --stone-400: #a6a097; --stone-500: #79736b; --stone-600: #57524b; --stone-700: #423e38; --stone-800: #29251f; --stone-900: #1c1813; /* warm ink — primary text */ --stone-950: #12100b; /* near-black — login marketing panel */ --white: #ffffff; /* Brand — azure. Deliberately RESTRAINED: light mode is white + sand, and blue appears only as the single action accent. Three working steps (tint / brand / hover) carry ~all UI; the deeper stop + cyan exist ONLY for the legacy login hero gradient and should not be used as general surface colors. */ --azure-50: #eef4f8; /* pale tint — selected nav, info bg (warmed slightly) */ --azure-100: #d8e6f0; --azure-200: #aecbe0; /* (sparingly — borders on info chips) */ --azure-500: #0a6dbd; /* PRIMARY brand — a touch deeper/softer than #0078d4 */ --azure-600: #075a9e; /* hover / pressed */ --azure-700: #0053a6; /* deep gradient stop — login hero ONLY */ --cyan-500: #00b4d8; /* gradient highlight — login hero ONLY */ /* Green — success / verified / exported (light-adapted from #238636/#3fb950) */ --green-600: #1a7f37; --green-700: #116329; --green-tint: #e6f4ea; /* Red — danger / needs-review / failed (light-adapted from #da3633/#f85149) */ --red-500: #cf222e; --red-600: #a40e26; --red-tint: #fdeceb; /* Amber — warnings / notices / medium confidence (from #d29922/#e3b341) */ --amber-500: #bf8700; --amber-600: #9a6700; --amber-tint: #fbf1d3; /* Violet — purchase-order matches / accents (from #a371f7/#8957e5) */ --violet-500: #8250df; --violet-tint: #f1ebfd; /* --------------------------------------------------------------------------- 2 · SEMANTIC — surfaces & text ------------------------------------------------------------------------ */ /* Backgrounds — WARM. Light mode is mainly white surfaces floating on a soft sand/beige canvas (not cool grey). Cards stay pure white for crispness; everything recessed warms toward paper. */ --sand-canvas: var(--stone-100); /* primitive sand (legacy #f6f4ef) */ --sand-subtle: var(--stone-50); /* striped rows, quiet panels (near-white, warm) */ --sand-muted: var(--stone-150); /* inputs at rest, wells, metadata boxes */ --sand-hover: var(--stone-200); /* row/nav hover fill */ /* RESOLVED (DESIGN_DECISIONS §7): the canvas is the lighter #f9f7f3 so white cards still separate on dense pages but the contrast isn't harsh on sparse pages. The canvas is the ONLY sand surface. */ --bg-canvas: #f9f7f3; --bg: var(--white); /* default surface — pure white */ --bg-subtle: var(--sand-subtle); --bg-muted: var(--sand-muted); --bg-hover: var(--sand-hover); /* RESOLVED (DESIGN_DECISIONS §7): sub-content inside a white card is FLAT WHITE, delineated by uppercase micro-labels + row dividers, not by a box. */ --bg-inset: var(--white); --surface: var(--white); /* cards, popovers, modals — pure white */ --surface-ink: var(--stone-950); /* dark hero (login marketing) */ /* Text / foreground */ --fg: var(--stone-900); /* primary text */ --fg-muted: var(--stone-600); /* secondary text, labels */ --fg-subtle: var(--stone-500); /* tertiary, helper text */ --fg-faint: var(--stone-400); /* placeholders, disabled, icons-at-rest */ --fg-on-brand: var(--white); /* text on azure / colored fills */ --fg-on-ink: #e9eaec; /* text on the dark hero */ /* Borders — warm taupe hairlines that sit naturally on sand (not cold grey) */ --border: var(--stone-200); /* default 1px hairline */ --border-strong: var(--stone-300); /* inputs, emphasized dividers */ --border-subtle: var(--stone-150); /* interior row dividers */ /* Brand roles */ --brand: var(--azure-500); --brand-hover: var(--azure-600); --brand-pressed:var(--azure-700); --brand-tint: var(--azure-50); /* selected-nav fill, info backgrounds */ --brand-tint-hover: #f3f8fc; /* nav/menu hover — lighter than the active tint */ --brand-border: var(--azure-100); --link: var(--azure-600); --brand-gradient: linear-gradient(270deg, #0078d4, #00b4d8, #0078d4, #0053a6); /* Semantic status — each: solid (text/icon), tint (bg), border, on-solid */ --success: var(--green-600); --success-strong: var(--green-700); --success-tint: var(--green-tint); --success-border: #b7e0c2; --danger: var(--red-500); --danger-strong: var(--red-600); --danger-tint: var(--red-tint); --danger-border: #f4b9b5; --warning: var(--amber-600); --warning-strong: #7d4e00; --warning-tint: var(--amber-tint); --warning-border: #ecd592; --info: var(--azure-500); --info-tint: var(--azure-50); --info-border: var(--azure-200); --accent-violet: var(--violet-500); --accent-violet-tint: var(--violet-tint); /* Document-type accents — the colour each document type carries across the UI (Matches category tiles, type badges, list chips). Each: -tint (soft fill behind the icon) + -fg (icon / strong label). Contract = green, Purchase = violet, Goods Received = amber are the established codes; Invoice takes the brand azure, and everything else falls back to a neutral stone tile. */ --doctype-invoice-tint: var(--azure-50); --doctype-invoice-fg: var(--azure-600); --doctype-contract-tint: var(--green-tint); --doctype-contract-fg: var(--green-600); --doctype-purchase-tint: var(--violet-tint); --doctype-purchase-fg: var(--violet-500); --doctype-goods-tint: var(--amber-tint); --doctype-goods-fg: var(--amber-600); --doctype-other-tint: var(--bg-muted); --doctype-other-fg: var(--fg-muted); /* --------------------------------------------------------------------------- 3 · SPACING (4px base grid) · RADII · SHADOWS · MOTION ------------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* RESOLVED (DESIGN_DECISIONS §7): radii tightened for a dense-tool feel. */ --r-sm: 3px; /* chips, account-code pills, small badges */ --r-md: 5px; /* buttons, inputs, menu items */ --r-lg: 6px; /* cards, sections, scroll areas, modals */ --r-xl: 9px; /* badges (pill-ish), tip cards */ --r-pill: 999px; /* status pills, avatars, toggles */ /* Light-mode elevation — soft, WARM low-spread shadows (dark mode used borders) */ --shadow-xs: 0 1px 1px rgba(28, 24, 19, 0.04); --shadow-sm: 0 1px 2px rgba(28, 24, 19, 0.06), 0 1px 1px rgba(28, 24, 19, 0.04); --shadow-card: 0 1px 3px rgba(28, 24, 19, 0.08), 0 1px 2px rgba(28, 24, 19, 0.04); --shadow-md: 0 4px 12px rgba(28, 24, 19, 0.10); --shadow-lg: 0 8px 24px rgba(28, 24, 19, 0.12); --shadow-popover: 0 12px 32px rgba(28, 24, 19, 0.16); --focus-ring: 0 0 0 3px rgba(10, 109, 189, 0.28); --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.15s; /* hovers, background swaps */ --dur-base: 0.2s; /* panels, chevrons, sidebar collapse */ /* --------------------------------------------------------------------------- 4 · TYPOGRAPHY — families, base, semantic roles ------------------------------------------------------------------------ */ /* Brand webfonts (self-hosted variable TTFs) with system fallbacks */ --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --font-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --text-base-size: 14px; --leading: 1.5; /* Semantic type roles — shorthand: weight | size / line-height Headings use the serif voice; UI/body/labels use sans; data uses mono. */ --text-display: 700 40px/1.15 var(--font-serif); /* login hero (-0.02em) */ --text-h1: 700 26px/1.25 var(--font-serif); /* page title */ --text-h2: 600 20px/1.3 var(--font-serif); /* section / card title */ --text-h3: 600 16px/1.4 var(--font-sans); /* sub-section (sans, UI density) */ --text-body: 400 14px/1.5 var(--font-sans); /* default UI text */ --text-body-strong: 600 14px/1.5 var(--font-sans); --text-sm: 400 13px/1.5 var(--font-sans); /* table cells, secondary */ --text-label: 500 12px/1.4 var(--font-sans); /* field labels, table th (UPPERCASE +0.5px) */ --text-caption: 500 11px/1.3 var(--font-sans); /* match badges, micro-labels */ --text-mono: 400 13px/1.5 var(--font-mono); /* amounts, IBANs, IDs */ }