/* HalcoPay Design Tokens — CSS variables Generated from brand/tokens/tokens.json (v3.0.0) Usage: import this file once at the app root. Default theme is "light" (cream). Set data-theme="dark" on for dark mode. The --mv-* prefix + the legacy token names (emerald/cream/gold) are preserved for backward compatibility with admin/checkout CSS — the VALUES below are the HalcoPay palette (the name "emerald" now holds the HalcoPay primary blue; renaming would churn 150+ callsites for no visible gain). */ :root { /* Brand (legacy names, HalcoPay values) */ --mv-color-emerald: #2390C6; /* HalcoPay primary blue (was emerald #1F4D3D) */ --mv-color-emerald-deep: #1B72A0; /* primary blue, pressed/hover */ --mv-color-emerald-soft: #5CACD6; /* primary blue, soft */ --mv-color-cream: #E7E5DD; --mv-color-cream-raised: #FFFFFF; /* Legacy aliases (so existing admin/checkout CSS keeps working) */ --mv-color-gold: var(--mv-color-emerald); --mv-color-gold-soft: var(--mv-color-emerald-soft); --mv-color-gold-dark: var(--mv-color-emerald-deep); /* Feedback */ --mv-color-success: #9EBF2C; /* HalcoPay lime — steps/checks/CONFIRMED/success (was green #1F7A4D) */ --mv-color-warning: #B8821A; --mv-color-error: #A32B2B; --mv-color-info: #1F4D7A; /* Neutrals */ --mv-gray-100: #F3F4F2; --mv-gray-300: #D6D4CE; --mv-gray-500: #6B7270; --mv-gray-700: #3A4040; --mv-gray-900: #0F1413; --mv-color-navy: #0E1A15; /* Typography */ --mv-font-display: "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mv-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mv-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; --mv-fs-display: 48px; --mv-fs-h1: 32px; --mv-fs-h2: 24px; --mv-fs-h3: 18px; --mv-fs-body-l: 20px; --mv-fs-body: 16px; --mv-fs-body-s: 14px; --mv-fs-caption: 12px; --mv-fw-light: 300; --mv-fw-regular: 400; --mv-fw-medium: 500; --mv-fw-semibold: 600; --mv-lh-tight: 1.1; --mv-lh-snug: 1.25; --mv-lh-normal: 1.5; --mv-lh-relaxed: 1.6; --mv-ls-tighter: -0.02em; --mv-ls-tight: -0.01em; --mv-ls-normal: 0.02em; --mv-ls-wide: 0.05em; --mv-ls-ultra: 0.15em; /* Spacing */ --mv-space-0: 0px; --mv-space-1: 4px; --mv-space-2: 8px; --mv-space-3: 12px; --mv-space-4: 16px; --mv-space-5: 24px; --mv-space-6: 32px; --mv-space-7: 48px; --mv-space-8: 64px; --mv-space-9: 120px; /* Radius */ --mv-radius-xs: 4px; --mv-radius-sm: 8px; --mv-radius-md: 12px; --mv-radius-lg: 16px; --mv-radius-xl: 24px; --mv-radius-full: 9999px; /* Elevation (soft, cream-friendly) */ --mv-elev-1: 0 1px 2px 0 rgba(0,0,0,0.04); --mv-elev-2: 0 2px 8px 0 rgba(0,0,0,0.06); --mv-elev-3: 0 8px 24px -4px rgba(0,0,0,0.08); --mv-elev-4: 0 16px 40px -8px rgba(31,33,48,0.18); /* Motion */ --mv-duration-fast: 120ms; --mv-duration-base: 200ms; --mv-duration-slow: 320ms; --mv-ease-standard: cubic-bezier(0.2, 0, 0, 1); --mv-ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* Z-index */ --mv-z-base: 0; --mv-z-dropdown: 1000; --mv-z-sticky: 1100; --mv-z-modal: 1300; --mv-z-toast: 1400; --mv-z-tooltip: 1500; } /* Light theme (default for HalcoPay) */ :root, [data-theme="light"] { --mv-bg: #E7E5DD; --mv-surface: #FFFFFF; --mv-surface-raised: #FFFFFF; --mv-border: rgba(31,33,48,0.10); --mv-border-strong: rgba(31,33,48,0.18); --mv-text-primary: #1F2130; --mv-text-secondary: rgba(31,33,48,0.70); --mv-text-tertiary: rgba(31,33,48,0.50); --mv-accent: var(--mv-color-emerald); } /* Dark theme (neutral ink) NOTE: the HalcoPay primary blue (#2390C6) reads ~5:1 on this dark ground (AA-ok), but we keep cream promoted to the accent role on dark for consistency with light. Contrast adapter, not a brand change. */ [data-theme="dark"] { --mv-bg: #17181F; --mv-surface: #20222C; --mv-surface-raised: #2A2C38; --mv-border: #313340; --mv-border-strong: #40424F; --mv-text-primary: #E7E5DD; --mv-text-secondary: #B9BAC4; --mv-text-tertiary: #7E8089; --mv-accent: var(--mv-color-cream); }