/* * split.this — design tokens (D16, docs/specs/2026-07-02-split-this-design.md §2 D16). * * Everything here lives on :root as a custom property so it pierces Shadow DOM — components * never hardcode colors; they reference these tokens. Blue = primary / "you're owed". Coral = * accent / "you owe" / warning / CTA (D16). * * Structure: * 1. Light-mode ramp + semantic tokens (default). * 2. Dark-mode override (prefers-color-scheme + explicit [data-theme="dark"] escape hatch). * 3. prefers-reduced-transparency solid-fill fallbacks. * 4. prefers-reduced-motion (freezes backdrop/animation tokens; index.html's .backdrop and * any component transitions should read *-duration tokens rather than hardcoding timings). */ :root { /* ---- Blue ramp (primary) ---- */ --blue-50: #eef4ff; --blue-100: #dbe7ff; --blue-200: #b3cdff; --blue-300: #85acff; --blue-400: #5b8bfb; --blue-500: #2f6fed; --blue-600: #1f56d1; --blue-700: #1941a3; --blue-800: #152f78; --blue-900: #0f2054; /* ---- Coral ramp (accent / "you owe") ---- */ --coral-50: #fff1ee; --coral-100: #ffdfd6; --coral-200: #ffbba9; --coral-300: #ff9580; --coral-400: #fb745a; --coral-500: #ee5636; --coral-600: #cf3f22; --coral-700: #a52f18; --coral-800: #7a2313; --coral-900: #521810; /* ---- Neutrals ---- */ --neutral-0: #ffffff; --neutral-50: #f7f8fb; --neutral-100: #eceef3; --neutral-200: #d9dce4; --neutral-300: #b9bfcc; --neutral-400: #8b93a5; --neutral-500: #656d80; --neutral-600: #4a5163; --neutral-700: #343a49; --neutral-800: #20242e; --neutral-900: #0f1117; --neutral-950: #090d16; /* ---- Semantic color roles (light default) ---- */ --color-primary: var(--blue-500); --color-primary-strong: var(--blue-700); --color-primary-soft: var(--blue-100); /* M6.4 (a11y, design-language.md §7): --color-accent is coral-600, not the coral-500 anchor — coral-500 white-on-accent text (install-banner's primary button) measures 3.49:1, short of WCAG AA's 4.5:1 body-text minimum; coral-600 measures 4.79:1. This also improves the coral focus-ring's own visibility against --color-surface-base (3.28:1 -> 4.51:1). coral-500 stays available on the raw ramp for non-text uses (e.g. the backdrop gradient mesh); only this semantic alias moved. --color-accent-strong/-soft are unaffected (already >=4.5:1, verified). */ --color-accent: var(--coral-600); --color-accent-strong: var(--coral-700); --color-accent-soft: var(--coral-100); --color-owed-to-you: var(--blue-600); /* "you're owed" */ --color-you-owe: var(--coral-600); /* "you owe" */ --color-surface-base: var(--neutral-50); --color-surface-raised: color-mix(in srgb, var(--neutral-0) 86%, var(--blue-50)); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-on-primary: var(--neutral-0); --color-text-on-accent: var(--neutral-0); --color-border: var(--neutral-200); --color-border-strong: color-mix(in srgb, var(--neutral-300) 72%, var(--blue-200)); --color-control-fill: color-mix(in srgb, var(--neutral-0) 68%, transparent); --color-control-fill-hover: color-mix(in srgb, var(--neutral-0) 82%, transparent); --color-control-fill-pressed: color-mix(in srgb, var(--blue-50) 74%, var(--neutral-0)); --color-control-placeholder: var(--neutral-500); /* ---- Gradient-mesh backdrop (blue -> coral), animated behind glass panels ---- */ --backdrop-gradient-mesh: radial-gradient( circle at 12% 15%, color-mix(in srgb, var(--blue-300) 48%, transparent) 0%, transparent 38% ), radial-gradient( circle at 88% 8%, color-mix(in srgb, var(--coral-300) 36%, transparent) 0%, transparent 34% ), radial-gradient( circle at 78% 88%, color-mix(in srgb, var(--blue-500) 28%, transparent) 0%, transparent 42% ), radial-gradient( circle at 20% 82%, color-mix(in srgb, var(--coral-400) 24%, transparent) 0%, transparent 44% ), linear-gradient(145deg, #f9fbff 0%, var(--blue-50) 38%, var(--neutral-50) 62%, var(--coral-50) 100%); /* ---- Glass surface tokens (R5: only used on CARD/host surfaces, never per-row) ---- */ --glass-blur: 28px; --glass-saturate: 1.85; --glass-tint: color-mix(in srgb, var(--neutral-0) 58%, transparent); --glass-tint-strong: color-mix(in srgb, var(--neutral-0) 76%, transparent); --glass-stroke: color-mix(in srgb, var(--neutral-0) 82%, transparent); --glass-hairline: color-mix(in srgb, var(--neutral-0) 72%, var(--blue-100)); --glass-specular: linear-gradient( 145deg, color-mix(in srgb, var(--neutral-0) 70%, transparent) 0%, color-mix(in srgb, var(--neutral-0) 18%, transparent) 38%, transparent 72% ); --glass-stroke-width: 1px; --glass-elev-1: 0 1px 2px color-mix(in srgb, var(--neutral-900) 8%, transparent), 0 1px 1px color-mix(in srgb, var(--neutral-900) 5%, transparent); --glass-elev-2: 0 18px 48px color-mix(in srgb, var(--neutral-900) 14%, transparent), 0 3px 10px color-mix(in srgb, var(--neutral-900) 8%, transparent); --glass-elev-3: 0 30px 80px color-mix(in srgb, var(--neutral-900) 22%, transparent), 0 8px 22px color-mix(in srgb, var(--neutral-900) 12%, transparent); /* Flat translucent fill for ledger ROWS (R5: no per-row backdrop-filter). */ --row-fill: color-mix(in srgb, var(--neutral-0) 62%, transparent); --row-fill-alt: color-mix(in srgb, var(--neutral-0) 46%, transparent); --row-fill-hover: color-mix(in srgb, var(--neutral-0) 78%, var(--blue-50)); --row-border: color-mix(in srgb, var(--neutral-0) 60%, var(--blue-100)); /* ---- Radii ---- */ --radius-continuous: 24px; /* superellipse-style continuous corner, approximated */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px; /* ---- Spacing scale ---- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* ---- Type scale ---- */ --font-family-base: "Avenir Next", Avenir, Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --font-family-display: "Avenir Next", Avenir, Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; --font-family-mono: "SF Mono", ui-monospace, "Cascadia Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: 2.5rem; --line-height-tight: 1.2; --line-height-base: 1.5; --letter-tight: -0.02em; /* ---- Motion ---- */ --duration-fast: 120ms; --duration-base: 220ms; --duration-backdrop: 32s; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1); } /* ------------------------------------------------------------------------ * Dark mode: prefers-color-scheme (auto) + [data-theme="dark"] (explicit user toggle). * index.html sets data-theme="auto" by default; app-root.js may swap it to "light"/"dark". * ---------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --color-primary: var(--blue-400); --color-primary-strong: var(--blue-200); --color-primary-soft: var(--blue-800); --color-accent: var(--coral-400); --color-accent-strong: var(--coral-200); --color-accent-soft: var(--coral-800); --color-owed-to-you: var(--blue-300); --color-you-owe: var(--coral-300); --color-surface-base: var(--neutral-950); --color-surface-raised: color-mix(in srgb, var(--neutral-900) 82%, var(--blue-900)); --color-text-primary: var(--neutral-50); --color-text-secondary: var(--neutral-300); --color-text-on-primary: var(--neutral-900); --color-text-on-accent: var(--neutral-900); --color-border: var(--neutral-700); --color-border-strong: color-mix(in srgb, var(--neutral-600) 70%, var(--blue-800)); --color-control-fill: color-mix(in srgb, var(--neutral-800) 66%, transparent); --color-control-fill-hover: color-mix(in srgb, var(--neutral-800) 82%, transparent); --color-control-fill-pressed: color-mix(in srgb, var(--blue-900) 62%, var(--neutral-800)); --color-control-placeholder: var(--neutral-400); --backdrop-gradient-mesh: radial-gradient( circle at 13% 16%, color-mix(in srgb, var(--blue-600) 48%, transparent) 0%, transparent 38% ), radial-gradient( circle at 87% 10%, color-mix(in srgb, var(--coral-700) 30%, transparent) 0%, transparent 34% ), radial-gradient( circle at 78% 88%, color-mix(in srgb, var(--blue-800) 52%, transparent) 0%, transparent 42% ), radial-gradient( circle at 20% 82%, color-mix(in srgb, var(--coral-800) 28%, transparent) 0%, transparent 42% ), linear-gradient(145deg, var(--neutral-950), var(--blue-900) 48%, var(--neutral-950)); --glass-tint: color-mix(in srgb, var(--neutral-800) 58%, transparent); --glass-tint-strong: color-mix(in srgb, var(--neutral-800) 74%, transparent); --glass-stroke: color-mix(in srgb, var(--neutral-0) 16%, transparent); --glass-hairline: color-mix(in srgb, var(--neutral-0) 18%, var(--blue-800)); --glass-specular: linear-gradient( 145deg, color-mix(in srgb, var(--neutral-0) 16%, transparent) 0%, color-mix(in srgb, var(--neutral-0) 5%, transparent) 42%, transparent 74% ); --glass-elev-1: 0 1px 2px color-mix(in srgb, black 40%, transparent); --glass-elev-2: 0 4px 16px color-mix(in srgb, black 45%, transparent); --glass-elev-3: 0 12px 40px color-mix(in srgb, black 55%, transparent); --row-fill: color-mix(in srgb, var(--neutral-800) 58%, transparent); --row-fill-alt: color-mix(in srgb, var(--neutral-800) 40%, transparent); --row-fill-hover: color-mix(in srgb, var(--neutral-800) 78%, var(--blue-900)); --row-border: color-mix(in srgb, var(--neutral-0) 12%, var(--blue-800)); } } [data-theme="dark"] { color-scheme: dark; --color-primary: var(--blue-400); --color-primary-strong: var(--blue-200); --color-primary-soft: var(--blue-800); --color-accent: var(--coral-400); --color-accent-strong: var(--coral-200); --color-accent-soft: var(--coral-800); --color-owed-to-you: var(--blue-300); --color-you-owe: var(--coral-300); --color-surface-base: var(--neutral-950); --color-surface-raised: color-mix(in srgb, var(--neutral-900) 82%, var(--blue-900)); --color-text-primary: var(--neutral-50); --color-text-secondary: var(--neutral-300); --color-text-on-primary: var(--neutral-900); --color-text-on-accent: var(--neutral-900); --color-border: var(--neutral-700); --color-border-strong: color-mix(in srgb, var(--neutral-600) 70%, var(--blue-800)); --color-control-fill: color-mix(in srgb, var(--neutral-800) 66%, transparent); --color-control-fill-hover: color-mix(in srgb, var(--neutral-800) 82%, transparent); --color-control-fill-pressed: color-mix(in srgb, var(--blue-900) 62%, var(--neutral-800)); --color-control-placeholder: var(--neutral-400); --glass-tint: color-mix(in srgb, var(--neutral-800) 55%, transparent); --glass-tint-strong: color-mix(in srgb, var(--neutral-800) 74%, transparent); --glass-stroke: color-mix(in srgb, var(--neutral-0) 14%, transparent); --glass-hairline: color-mix(in srgb, var(--neutral-0) 18%, var(--blue-800)); --row-fill: color-mix(in srgb, var(--neutral-800) 58%, transparent); --row-fill-alt: color-mix(in srgb, var(--neutral-800) 40%, transparent); --row-fill-hover: color-mix(in srgb, var(--neutral-800) 78%, var(--blue-900)); --row-border: color-mix(in srgb, var(--neutral-0) 12%, var(--blue-800)); } [data-theme="light"] { color-scheme: light; } /* ------------------------------------------------------------------------ * R5 / D16: prefers-reduced-transparency -> solid fills, no blur, no color-mix translucency. * ---------------------------------------------------------------------- */ @media (prefers-reduced-transparency: reduce) { :root { --glass-blur: 0px; --glass-saturate: 1; --glass-tint: var(--neutral-0); --glass-stroke: var(--neutral-200); --row-fill: var(--neutral-50); --row-fill-alt: var(--neutral-100); } [data-theme="dark"] { --glass-tint: var(--neutral-800); --glass-stroke: var(--neutral-700); --row-fill: var(--neutral-800); --row-fill-alt: var(--neutral-700); } @media (prefers-color-scheme: dark) { :root { --glass-tint: var(--neutral-800); --glass-stroke: var(--neutral-700); --row-fill: var(--neutral-800); --row-fill-alt: var(--neutral-700); } } } /* ------------------------------------------------------------------------ * R5 / D16: prefers-reduced-motion -> freeze the animated backdrop and long transitions. * index.html's .backdrop keyframe animation is disabled directly; components should also * read --duration-backdrop / gate transitions off this token where relevant. * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-backdrop: 0ms; } }