/* ============================================================================= Ledgergard design tokens — canonical foundation (US 4953, Feature 1.2) --------------------------------------------------------------------------- Single source of truth for color, spacing, radius, elevation and z-index. Every component and module resolves visual values through these CSS custom properties — no literal hex/px in component CSS (design-system skill, Forbidden Operations). Naming follows the `design-system` skill (--color-, --spacing-, --radius- families), NOT the Figma export names (--card/--foreground/...). Values mirror the Figma theme (theme.css), the real Ledgergard palette already used by shell.css and ledgergard-ui.css (US 4895). Scope of this sheet (US 4953): mechanism + base scales only. Deliberately excluded and added by sibling stories: - semantic color roles & status (success/warning/error/info, doc states) -> #4955 - typographic scale values (--text-*, font weights/line-heights) -> #4954 Load order: this sheet loads FIRST at shell level (App.razor, wired in #4968) so every later sheet resolves through it. See docs/design-system/US4953-token-taxonomy-analysis.md (Task #4966) for the taxonomy analysis and the decisions behind these names/values. ========================================================================== */ :root { /* ── Color — primitives ───────────────────────────────────────────── Semantic/status roles (success, warning, error, info) layer on top in #4955; these are framework defaults only, no business theming. */ --color-background: #f0f2f5; /* app / content surface behind cards */ --color-surface: #ffffff; /* cards, panels, table backgrounds (skill: surface; Figma: card) */ --color-surface-muted: #f3f4f6; /* input fills, subtle inset surfaces */ --color-secondary: #e8ecf2; /* toolbar / secondary button fill */ --color-border: #d1d5db; /* hairlines, dividers, input borders */ /* A quieter hairline for surfaces that also carry elevation: a full-strength border under a shadow draws the box twice. Referenced (with this as the fallback) by the dashboard cards and the Inbox rows since US 7524; a token so the two cannot drift. */ --color-border-soft: #e5e7eb; --color-text: #1a1f2e; /* primary text on background/surface */ --color-text-muted: #6b7280; /* secondary / helper text */ --color-primary: #1d5fa8; /* primary action / brand */ --color-primary-foreground: #ffffff; /* text/icon on a primary surface */ --color-accent: #dbeafe; /* accent surface: hover / selected rows */ --color-ring: #93c5fd; /* focus ring base color */ /* Focus ring (US 4964) — the shared keyboard focus indicator. */ --focus-ring-color: #2563eb; --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ── Spacing ───────────────────────────────────────────────────────── Intentionally tight (4-16px) for the dense accounting UI the design-system skill calls for; extend downward as --spacing-2xs. */ --spacing-2xs: 2px; /* label→control gaps, hairline paddings (filter/summary) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; /* section gaps / generous page padding (US 4956) */ /* ── Radius ────────────────────────────────────────────────────────── Explicit values: Figma's relative `radius - 4px` math is invalid at our real 0.25rem base. --radius-md (4px) == the legacy --lg-radius. */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; /* Surfaces a viewer reads as OBJECTS rather than as parts of a table — a KPI card, a panel. The scale above is sized for controls, where 4px is right; the same 4px on a card the size of a postcard reads as a table cell, which is what the dashboard looked like. */ --radius-xl: 10px; /* ── Elevation (scaffolding) ───────────────────────────────────────── Lifted from the shadows currently hardcoded in shell.css. */ --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06); --elevation-2: 0 8px 24px rgba(0, 0, 0, 0.18); --elevation-3: 0 20px 50px rgba(0, 0, 0, 0.30); /* ── Z-index (scaffolding) ─────────────────────────────────────────── Named layers replacing the magic 40/41/50/51 in shell.css. */ --z-popover-backdrop: 40; --z-popover: 41; --z-overlay-backdrop: 50; --z-overlay: 51; /* ── Typography (US 4954) ──────────────────────────────────────────── Font stack + fixed type scale consumed by the .lg-text* utilities and the component. Color of text is a color token (--color-text / --color-text-muted); these are size/weight/leading/family only. */ --font-family-base: 'Inter', 'Segoe UI', Arial, sans-serif; --font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; --font-size-xs: 11px; /* secondary / helper, table header */ --font-size-sm: 12px; /* table body */ --font-size-md: 13px; /* body (base) */ --font-size-lg: 15px; /* section title */ --font-size-xl: 18px; /* page title */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --line-height-tight: 1.2; /* headings */ --line-height-normal: 1.5; /* body / running text */ /* ── Semantic status roles (US 4955) ───────────────────────────────── Meaning, not raw palette. Each role is a pair: --color-{role} is the STRONG color (text / icon / border on the subtle fill); --color-{role}-subtle is the soft BACKGROUND fill. Components reference these roles, never the primitives. Roles alias a primitive where one already expresses the meaning (so dark-theme overrides of the primitive flow through automatically); success/warning/error carry their own accessible pairs (contrast validated by US 4964). Action roles are the existing --color-primary / --color-secondary. */ /* Neutral status text is a touch darker than --color-text-muted so it clears the WCAG AA 4.5:1 bar on its subtle background (US 4964 contrast check). */ --color-neutral: #4b5563; --color-neutral-subtle: var(--color-surface-muted); --color-info: var(--color-primary); --color-info-subtle: var(--color-accent); --color-success: #047857; --color-success-subtle: #d1fae5; --color-warning: #b45309; --color-warning-subtle: #fef3c7; --color-error: #b91c1c; --color-error-subtle: #fee2e2; /* Backdrop scrim behind modals (US 4963). */ --color-backdrop: rgba(15, 23, 42, 0.45); /* ── Layout (US 4956) ──────────────────────────────────────────────── Named responsive breakpoints (desktop primary, tablet supported, mobile best-effort) and the readable content max-width. CSS @media cannot read custom properties, so layout.css repeats these literals — the values MUST stay in sync (a test guards this). These tokens are the reference for C# and any script that needs the breakpoint. */ --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --content-max-width: 1280px; /* ── Icon sizes (US 4962) ──────────────────────────────────────────── Icons inherit color via currentColor; only their box size is tokenized. */ --icon-size-sm: 14px; --icon-size-md: 16px; --icon-size-lg: 20px; /* ── Chart series palette (ADR-012 D3) ───────────────────────────────── CATEGORICAL, and deliberately not the status tokens. The trend chart first drew its cost series in --color-warning, which made an ordinary month's expenses look like an alert: a status colour carries meaning, and a series is not a status. These are the Okabe-Ito colour-blind-safe palette. "Friendlier" has to include the ~8% of men with a colour-vision deficiency, for whom a red/green pairing is two identical bars — and a chart is the one place in this app where colour is load-bearing, since it is what tells one series from another. They also differ in lightness, so they survive greyscale. */ --chart-1: #0072b2; /* blue — first series (revenue) */ --chart-2: #e69f00; /* amber — second series (costs) */ --chart-3: #009e73; /* green — third series */ --chart-4: #cc79a7; /* pink — fourth series */ --chart-grid: #e5e7eb; } /* ============================================================================= Theming seam (AC #3) — attribute selector, not the Figma `.dark` class. Components never change; a [data-theme] on the root re-points the tokens. This is a STUB that proves the mechanism only — the real dark palette is out of scope for US 4953 (#4955+). Only the few tokens needed to make the swap observable are overridden here. ========================================================================== */ [data-theme="dark"] { --color-background: #11161f; --color-surface: #1a2230; --color-surface-muted: #232c3c; --color-secondary: #232c3c; --color-border: #2d3748; --color-border-soft: #253044; --color-text: #e6e9ef; --color-text-muted: #9aa4b6; --color-accent: #1e3a5f; /* Lifted for a dark ground: the same hues, enough luminance to read against it. */ --chart-1: #3ea6e8; --chart-2: #f2b53d; --chart-3: #34c79b; --chart-4: #e29ac0; --chart-grid: #2d3748; }