/** * Checkout design tokens — override these per tenant/brand. * Toggle themes: or * Omit data-theme to follow system preference. */ :root, [data-theme='light'] { color-scheme: light; /* Typography */ --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 0.8125rem; --font-size-sm: 0.9rem; --font-size-base: 1rem; --font-size-lg: 1.75rem; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-base: 1.5; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* Radii */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; /* Layout */ --page-max-width: 1100px; --layout-gap: var(--space-6); --panel-padding: var(--space-5); /* Colors — light */ --color-bg: #f6f7f8; --color-surface: #ffffff; --color-text: #1a1a1a; --color-text-muted: #666666; --color-border: #e2e4e8; --color-border-subtle: #eef0f3; --color-accent: #111827; --color-accent-hover: #0b1220; --color-accent-text: #ffffff; --color-accent-disabled-opacity: 0.6; --color-input-bg: #ffffff; --color-input-border: var(--color-border); --color-input-text: var(--color-text); --color-error: #b42318; --color-warning-bg: #fff8e6; --color-warning-border: #f0d98c; --color-warning-text: #6b5700; --color-success-bg: #ecfdf3; --color-success-border: #abefc6; --color-success-text: #067647; } [data-theme='dark'] { color-scheme: dark; --color-bg: #0f1115; --color-surface: #1a1d24; --color-text: #f3f4f6; --color-text-muted: #9ca3af; --color-border: #2d3340; --color-border-subtle: #232833; --color-accent: #f9fafb; --color-accent-hover: #e5e7eb; --color-accent-text: #111827; --color-input-bg: #12151b; --color-input-border: var(--color-border); --color-input-text: var(--color-text); --color-error: #f97066; --color-warning-bg: #2a2410; --color-warning-border: #6b5700; --color-warning-text: #fde68a; --color-success-bg: #0f2419; --color-success-border: #067647; --color-success-text: #abefc6; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --color-bg: #0f1115; --color-surface: #1a1d24; --color-text: #f3f4f6; --color-text-muted: #9ca3af; --color-border: #2d3340; --color-border-subtle: #232833; --color-accent: #f9fafb; --color-accent-hover: #e5e7eb; --color-accent-text: #111827; --color-input-bg: #12151b; --color-input-border: var(--color-border); --color-input-text: var(--color-text); --color-error: #f97066; --color-warning-bg: #2a2410; --color-warning-border: #6b5700; --color-warning-text: #fde68a; --color-success-bg: #0f2419; --color-success-border: #067647; --color-success-text: #abefc6; } }