/* ============================================ TALVI — Design tokens · v2 Property management · Human-factors identity ============================================ */ :root { /* ----- Brand · Trust Blue ----- */ --talvi-primary: #3B73D3; /* Trust Blue · the brand */ --talvi-deep: #1F4DA0; /* Pressed / link visited */ --talvi-tint: #E2EBF8; /* Surface · lavender of blue */ --talvi-accent: #3B73D3; /* Accent (tittle) — same hue as primary, intentionally */ /* ----- Neutrals ----- */ --talvi-ink: #1B1D22; /* Body text · wordmark color */ --talvi-ink-2: #4A4D55; /* Secondary text */ --talvi-ink-3: #767A82; /* Tertiary text · captions */ --talvi-paper: #FAF9F5; /* Warm paper · primary background */ --talvi-paper-2: #F2EFE9; /* Card surface */ --talvi-line: #E3DFD6; /* Hairline borders */ /* ----- Status (reserved · never decorative) ----- */ --talvi-success: #2F7A55; --talvi-warning: #B86A24; --talvi-danger: #C24634; /* ----- Type ----- */ --talvi-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --talvi-font-serif: "Newsreader", Georgia, "Times New Roman", serif; --talvi-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --talvi-font-script: "Caveat", "Manrope", cursive; /* ----- Type scale ----- */ --talvi-text-xs: 12px; --talvi-text-sm: 13px; --talvi-text-base: 15px; --talvi-text-lg: 18px; --talvi-text-xl: 20px; --talvi-text-2xl: 24px; --talvi-text-3xl: 32px; --talvi-text-4xl: 54px; /* ----- Radii ----- */ --talvi-radius-sm: 6px; --talvi-radius-md: 10px; --talvi-radius-lg: 14px; --talvi-radius-mark: 22%; /* Rounded-square mark */ --talvi-radius-icon: 38%; /* App icon squircle */ --talvi-radius-pill: 99px; /* ----- Spacing ----- */ --talvi-space-1: 4px; --talvi-space-2: 8px; --talvi-space-3: 12px; --talvi-space-4: 16px; --talvi-space-5: 24px; --talvi-space-6: 32px; --talvi-space-8: 48px; /* ----- Shadow ----- */ --talvi-shadow-sm: 0 1px 0 rgba(0,0,0,0.04); --talvi-shadow-md: 0 12px 30px -18px rgba(27,29,34,0.18); --talvi-shadow-lg: 0 30px 60px -30px rgba(27,29,34,0.45); /* ----- Motor target floor ----- */ --talvi-tap-target: 48px; } /* ============================================ Alternative palettes — swap on ============================================ */ [data-palette="slate"] { --talvi-primary: #34425B; --talvi-deep: #1F2638; --talvi-tint: #E6EAF1; --talvi-accent: #34425B; --talvi-paper: #F7F5F0; --talvi-paper-2: #F1EEE7; --talvi-line: #E2DFD8; } [data-palette="evergreen"] { --talvi-primary: #264A3A; --talvi-deep: #15301F; --talvi-tint: #E1ECE4; --talvi-accent: #264A3A; --talvi-paper: #F6F2EA; --talvi-paper-2: #EFE9DD; --talvi-line: #DED7CA; } [data-palette="clay"] { --talvi-primary: #2A2520; --talvi-deep: #15110D; --talvi-tint: #F1ECE6; --talvi-accent: #C66B3D; --talvi-paper: #F8F1E8; --talvi-paper-2: #F2E9DC; --talvi-line: #E5DCCC; } [data-palette="plum"] { --talvi-primary: #3C2842; --talvi-deep: #241524; --talvi-tint: #EFE6EE; --talvi-accent: #D89E9E; --talvi-paper: #F8F2F1; --talvi-paper-2: #F1E7E5; --talvi-line: #E5D8D5; } [data-palette="ink"] { --talvi-primary: #1F1F23; --talvi-deep: #0E0E12; --talvi-tint: #ECEAE5; --talvi-accent: #888884; --talvi-paper: #F4F2EC; --talvi-paper-2: #ECEAE3; --talvi-line: #DEDBD1; }