/* ============================================================================= * Invested platform — global :root tokens * ----------------------------------------------------------------------------- * Two layers live here: * * 1. Legacy light brand variables (kiosk landing, fastlegepro CE-cleared UI, * Signage public displays). Stable for backwards compatibility — DO NOT * RENAME OR REMOVE. * * 2. Theme-invariant platform tokens (typography, spacing, radius, border * widths, blur, transitions, z-index). These do not change between light * and dark mode, so they live on `:root` and are available to every * consumer of the Tailwind preset, regardless of whether the * `invested-theme-dark` / `invested-theme-light` wrapper is applied. * * The dark/light theme files supply only the colour, shadow and focus * tokens that actually differ between modes. * * For the refined platform light surface (indigo accent, off-white canvas, * elevated cards), opt into the scoped class theme: * * @import '@invested/design-tokens/light-theme.css'; * * ===========================================================================*/ :root { /* =========================================================================== * 1. Legacy light brand palette — DO NOT REMOVE * =========================================================================*/ --brand-primary: #4A7C73; --brand-primary-rgb: 74 124 115; --brand-accent-beige: #E8DCC0; --brand-accent-beige-rgb: 232 220 192; --brand-secondary: #E8DCC0; --brand-secondary-rgb: 232 220 192; --brand-muted-green: #7BA05B; --brand-muted-green-rgb: 123 160 91; --brand-text-dark: #2D3748; --brand-text-dark-rgb: 45 55 72; --brand-text-medium: #4A5568; --brand-text-medium-rgb: 74 85 104; --brand-text-muted: #718096; --brand-text-muted-rgb: 113 128 150; --surface: #FFFFFF; --surface-rgb: 255 255 255; --border: #E2E8F0; --border-rgb: 226 232 240; --success: #48BB78; --success-rgb: 72 187 120; --warning: #ED8936; --warning-rgb: 237 137 54; --danger: #E53E3E; --danger-rgb: 229 62 62; /* =========================================================================== * 2. Theme-invariant platform tokens * =========================================================================*/ /* --------------------------------------------------------------------------- * Typography — Inter (UI) + Inter Tight (display) * -------------------------------------------------------------------------*/ --invested-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --invested-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --invested-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; --invested-font-weight-regular: 400; --invested-font-weight-medium: 500; --invested-font-weight-semibold: 600; --invested-font-weight-bold: 700; /* Type scale — display family (page heroes) */ --invested-text-display-2xl-size: 3.75rem; /* 60px */ --invested-text-display-2xl-line: 1.05; --invested-text-display-xl-size: 3rem; /* 48px */ --invested-text-display-xl-line: 1.08; --invested-text-display-lg-size: 2.25rem; /* 36px */ --invested-text-display-lg-line: 1.12; --invested-text-display-md-size: 1.875rem; /* 30px */ --invested-text-display-md-line: 1.18; /* Type scale — UI family */ --invested-text-headline-lg-size: 1.5rem; --invested-text-headline-lg-line: 1.3; --invested-text-headline-md-size: 1.25rem; --invested-text-headline-md-line: 1.35; --invested-text-headline-sm-size: 1.125rem; --invested-text-headline-sm-line: 1.4; --invested-text-body-lg-size: 1rem; --invested-text-body-lg-line: 1.6; --invested-text-body-md-size: 0.875rem; --invested-text-body-md-line: 1.55; --invested-text-body-sm-size: 0.8125rem; --invested-text-body-sm-line: 1.5; --invested-text-caption-size: 0.75rem; --invested-text-caption-line: 1.45; --invested-text-eyebrow-size: 0.6875rem; --invested-text-eyebrow-line: 1.3; --invested-text-micro-size: 0.625rem; --invested-text-micro-line: 1.3; /* Letter spacing */ --invested-tracking-tighter: -0.04em; --invested-tracking-tight: -0.02em; --invested-tracking-snug: -0.01em; --invested-tracking-normal: 0; --invested-tracking-wide: 0.04em; --invested-tracking-wider: 0.08em; --invested-tracking-eyebrow: 0.18em; --invested-tracking-micro: 0.12em; /* Line heights */ --invested-leading-tight: 1.1; --invested-leading-snug: 1.25; --invested-leading-normal: 1.5; --invested-leading-relaxed: 1.65; /* --------------------------------------------------------------------------- * Spacing scale — semantic rhythm tokens * -------------------------------------------------------------------------*/ --invested-space-card-padding: 1.5rem; --invested-space-card-padding-lg: 2rem; --invested-space-section-y: 4rem; --invested-space-section-y-lg: 6rem; --invested-space-page-y: 3rem; --invested-space-page-x: 1.5rem; --invested-space-page-x-lg: 2.5rem; --invested-space-stack-tight: 0.5rem; --invested-space-stack: 1rem; --invested-space-stack-loose: 1.5rem; /* --------------------------------------------------------------------------- * Border radius scale * -------------------------------------------------------------------------*/ --invested-radius-xs: 0.375rem; /* 6px */ --invested-radius-sm: 0.5rem; /* 8px */ --invested-radius-md: 0.625rem; /* 10px */ --invested-radius-lg: 0.75rem; /* 12px */ --invested-radius-xl: 1rem; /* 16px */ --invested-radius-2xl: 1.25rem; /* 20px */ --invested-radius-3xl: 1.75rem; /* 28px */ --invested-radius-pill: 9999px; /* --------------------------------------------------------------------------- * Border weights * -------------------------------------------------------------------------*/ --invested-border-width-hairline: 1px; --invested-border-width-default: 1px; --invested-border-width-strong: 1.5px; --invested-border-width-focus: 2px; /* --------------------------------------------------------------------------- * Blur — for glass surfaces * -------------------------------------------------------------------------*/ --invested-blur-sm: 8px; --invested-blur-md: 14px; --invested-blur-lg: 24px; --invested-blur-xl: 40px; /* --------------------------------------------------------------------------- * Transitions — quiet, precise * -------------------------------------------------------------------------*/ --invested-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --invested-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --invested-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --invested-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1); --invested-duration-instant: 80ms; --invested-duration-fast: 140ms; --invested-duration-base: 200ms; --invested-duration-slow: 320ms; --invested-duration-deliberate: 480ms; --invested-transition-base: all var(--invested-duration-base) var(--invested-ease-standard); --invested-transition-fast: all var(--invested-duration-fast) var(--invested-ease-standard); --invested-transition-emphasized: all var(--invested-duration-slow) var(--invested-ease-emphasized); /* --------------------------------------------------------------------------- * Focus ring sizing — color comes from the active theme * -------------------------------------------------------------------------*/ --invested-focus-ring-width: 2px; --invested-focus-ring-offset: 2px; /* --------------------------------------------------------------------------- * Z-index scale * -------------------------------------------------------------------------*/ --invested-z-base: 0; --invested-z-raised: 10; --invested-z-sticky: 20; --invested-z-header: 30; --invested-z-drawer: 40; --invested-z-overlay: 50; --invested-z-modal: 60; --invested-z-popover: 70; --invested-z-toast: 80; --invested-z-tooltip: 90; }