/* ============================================================================ Krepta Design Tokens — CSS variables (hand-generated from tokens.json v0.1) ---------------------------------------------------------------------------- Usage: ... or data-theme="dark" (default = light) prefers-color-scheme honored when [data-theme] not set. Naming: --krp-color-* primitives (do not consume directly in components) --krp-bg-*, --krp-fg-*, --krp-border-*, --krp-action-*, --krp-status-* semantic aliases (consume these) ============================================================================ */ :root, [data-theme="light"] { /* ------------ Primitive colours (theme-agnostic) ------------ */ --krp-color-brand-50: #E6F4F2; --krp-color-brand-100: #C2E4E0; --krp-color-brand-200: #8FCEC6; --krp-color-brand-300: #5DB7AB; --krp-color-brand-400: #36A092; --krp-color-brand-500: #168A7A; --krp-color-brand-600: #0F7164; --krp-color-brand-700: #0B594F; --krp-color-brand-800: #08443C; --krp-color-brand-900: #062F2A; --krp-color-brand-950: #03201C; --krp-color-neutral-0: #FFFFFF; --krp-color-neutral-50: #F7F8FA; --krp-color-neutral-100: #EEF0F3; --krp-color-neutral-200: #DDE1E7; --krp-color-neutral-300: #C2C8D1; --krp-color-neutral-400: #9AA2AE; --krp-color-neutral-500: #6E7682; --krp-color-neutral-600: #4F5663; --krp-color-neutral-700: #383E49; --krp-color-neutral-800: #252A33; --krp-color-neutral-900: #161A21; --krp-color-neutral-950: #0B0E13; --krp-color-success-50: #E8F7EE; --krp-color-success-500: #1F9D55; --krp-color-success-600: #177F45; --krp-color-success-700: #0F5F34; --krp-color-warning-50: #FFF6E5; --krp-color-warning-500: #CC8A00; --krp-color-warning-600: #A36E00; --krp-color-warning-700: #7A5200; --krp-color-danger-50: #FCEBEA; --krp-color-danger-500: #C4302B; --krp-color-danger-600: #9F2622; --krp-color-danger-700: #7A1C19; --krp-color-info-50: #E8F1FB; --krp-color-info-500: #2563CB; --krp-color-info-600: #1B4DA0; --krp-color-info-700: #143A78; --krp-color-accent-violet: #6E56CF; --krp-color-accent-amber: #E0A12C; --krp-color-accent-magenta: #C0399F; --krp-color-accent-teal: #168A7A; /* ------------ Semantic — LIGHT theme ------------ */ --krp-bg-page: var(--krp-color-neutral-50); --krp-bg-surface: var(--krp-color-neutral-0); --krp-bg-surface-alt: var(--krp-color-neutral-50); --krp-bg-raised: var(--krp-color-neutral-0); --krp-bg-overlay: rgba(11, 14, 19, 0.45); --krp-bg-inverted: var(--krp-color-neutral-900); --krp-fg-default: var(--krp-color-neutral-900); --krp-fg-muted: var(--krp-color-neutral-600); --krp-fg-subtle: var(--krp-color-neutral-500); --krp-fg-disabled: var(--krp-color-neutral-400); --krp-fg-inverted: var(--krp-color-neutral-0); --krp-fg-on-brand: var(--krp-color-neutral-0); --krp-fg-on-success: var(--krp-color-neutral-0); --krp-fg-on-warning: var(--krp-color-neutral-900); --krp-fg-on-danger: var(--krp-color-neutral-0); --krp-fg-link: var(--krp-color-brand-600); --krp-fg-link-hover: var(--krp-color-brand-700); --krp-border-default: var(--krp-color-neutral-200); --krp-border-strong: var(--krp-color-neutral-300); --krp-border-subtle: var(--krp-color-neutral-100); --krp-border-focus: var(--krp-color-brand-500); --krp-border-danger: var(--krp-color-danger-500); --krp-border-success: var(--krp-color-success-500); --krp-action-primary-bg: var(--krp-color-brand-500); --krp-action-primary-bg-hover: var(--krp-color-brand-600); --krp-action-primary-bg-active: var(--krp-color-brand-700); --krp-action-primary-fg: var(--krp-color-neutral-0); --krp-action-secondary-bg: var(--krp-color-neutral-0); --krp-action-secondary-bg-hover: var(--krp-color-neutral-100); --krp-action-secondary-border: var(--krp-color-neutral-300); --krp-action-secondary-fg: var(--krp-color-neutral-900); --krp-action-ghost-bg-hover: var(--krp-color-neutral-100); --krp-action-destructive-bg: var(--krp-color-danger-500); --krp-action-destructive-bg-hover: var(--krp-color-danger-600); --krp-status-success-bg: var(--krp-color-success-50); --krp-status-success-fg: var(--krp-color-success-700); --krp-status-warning-bg: var(--krp-color-warning-50); --krp-status-warning-fg: var(--krp-color-warning-700); --krp-status-danger-bg: var(--krp-color-danger-50); --krp-status-danger-fg: var(--krp-color-danger-700); --krp-status-info-bg: var(--krp-color-info-50); --krp-status-info-fg: var(--krp-color-info-700); --krp-status-neutral-bg: var(--krp-color-neutral-100); --krp-status-neutral-fg: var(--krp-color-neutral-700); /* ------------ Typography ------------ */ --krp-font-sans: Inter, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif; --krp-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --krp-font-brand: Inter, system-ui, sans-serif; --krp-weight-regular: 400; --krp-weight-medium: 500; --krp-weight-semibold: 600; --krp-weight-bold: 700; --krp-fs-xs: 12px; --krp-fs-sm: 13px; --krp-fs-md: 14px; --krp-fs-lg: 16px; --krp-fs-xl: 18px; --krp-fs-2xl: 20px; --krp-fs-3xl: 24px; --krp-fs-4xl: 30px; --krp-fs-5xl: 36px; --krp-fs-6xl: 48px; --krp-lh-tight: 1.2; --krp-lh-snug: 1.35; --krp-lh-normal: 1.5; --krp-lh-relaxed: 1.65; --krp-ls-tighter: -0.02em; --krp-ls-tight: -0.01em; --krp-ls-normal: 0; --krp-ls-wide: 0.02em; --krp-ls-wider: 0.06em; /* ------------ Spacing (4-pt grid) ------------ */ --krp-sp-0: 0; --krp-sp-px: 1px; --krp-sp-0_5: 2px; --krp-sp-1: 4px; --krp-sp-1_5: 6px; --krp-sp-2: 8px; --krp-sp-3: 12px; --krp-sp-4: 16px; --krp-sp-5: 20px; --krp-sp-6: 24px; --krp-sp-8: 32px; --krp-sp-10: 40px; --krp-sp-12: 48px; --krp-sp-14: 56px; --krp-sp-16: 64px; --krp-sp-20: 80px; --krp-sp-24: 96px; --krp-sp-32: 128px; /* ------------ Radii ------------ */ --krp-radius-none: 0; --krp-radius-xs: 2px; --krp-radius-sm: 4px; --krp-radius-md: 6px; --krp-radius-lg: 8px; --krp-radius-xl: 12px; --krp-radius-2xl: 16px; --krp-radius-3xl: 24px; --krp-radius-pill: 9999px; --krp-radius-round: 50%; /* ------------ Border widths ------------ */ --krp-bw-0: 0; --krp-bw-1: 1px; --krp-bw-2: 2px; --krp-bw-4: 4px; /* ------------ Shadows ------------ */ --krp-shadow-none: none; --krp-shadow-sm: 0 1px 2px rgba(11, 14, 19, 0.05); --krp-shadow-md: 0 2px 6px rgba(11, 14, 19, 0.06), 0 1px 2px rgba(11, 14, 19, 0.04); --krp-shadow-lg: 0 8px 24px rgba(11, 14, 19, 0.08), 0 2px 6px rgba(11, 14, 19, 0.05); --krp-shadow-xl: 0 16px 48px rgba(11, 14, 19, 0.12), 0 4px 12px rgba(11, 14, 19, 0.06); --krp-shadow-focus: 0 0 0 3px rgba(22, 138, 122, 0.35); --krp-shadow-focus-danger: 0 0 0 3px rgba(196, 48, 43, 0.35); /* ------------ Motion ------------ */ --krp-dur-instant: 0ms; --krp-dur-fast: 120ms; --krp-dur-base: 200ms; --krp-dur-slow: 320ms; --krp-dur-slower: 480ms; --krp-ease-linear: cubic-bezier(0, 0, 1, 1); --krp-ease-standard: cubic-bezier(0.2, 0, 0, 1); --krp-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --krp-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --krp-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* ------------ Z-index ------------ */ --krp-z-base: 0; --krp-z-dropdown: 1000; --krp-z-sticky: 1100; --krp-z-fixed: 1200; --krp-z-modal-backdrop: 1300; --krp-z-modal: 1400; --krp-z-popover: 1500; --krp-z-tooltip: 1600; --krp-z-toast: 1700; /* ------------ Sizes ------------ */ --krp-control-sm: 32px; --krp-control-md: 40px; --krp-control-lg: 48px; --krp-icon-xs: 12px; --krp-icon-sm: 16px; --krp-icon-md: 20px; --krp-icon-lg: 24px; --krp-icon-xl: 32px; --krp-container-payform: 440px; --krp-container-form: 560px; --krp-container-narrative: 720px; --krp-container-app: 1440px; } /* ============================================================================ Dark theme — overrides only the semantic aliases. Primitives stay constant. ============================================================================ */ [data-theme="dark"] { --krp-bg-page: var(--krp-color-neutral-950); --krp-bg-surface: var(--krp-color-neutral-900); --krp-bg-surface-alt: var(--krp-color-neutral-800); --krp-bg-raised: var(--krp-color-neutral-800); --krp-bg-overlay: rgba(0, 0, 0, 0.6); --krp-bg-inverted: var(--krp-color-neutral-0); --krp-fg-default: var(--krp-color-neutral-50); --krp-fg-muted: var(--krp-color-neutral-300); --krp-fg-subtle: var(--krp-color-neutral-400); --krp-fg-disabled: var(--krp-color-neutral-600); --krp-fg-inverted: var(--krp-color-neutral-900); --krp-fg-on-brand: var(--krp-color-neutral-0); --krp-fg-on-success: var(--krp-color-neutral-0); --krp-fg-on-warning: var(--krp-color-neutral-900); --krp-fg-on-danger: var(--krp-color-neutral-0); --krp-fg-link: var(--krp-color-brand-300); --krp-fg-link-hover: var(--krp-color-brand-200); --krp-border-default: var(--krp-color-neutral-700); --krp-border-strong: var(--krp-color-neutral-600); --krp-border-subtle: var(--krp-color-neutral-800); --krp-border-focus: var(--krp-color-brand-300); --krp-border-danger: var(--krp-color-danger-500); --krp-border-success: var(--krp-color-success-500); --krp-action-primary-bg: var(--krp-color-brand-400); --krp-action-primary-bg-hover: var(--krp-color-brand-300); --krp-action-primary-bg-active: var(--krp-color-brand-500); --krp-action-primary-fg: var(--krp-color-neutral-950); --krp-action-secondary-bg: var(--krp-color-neutral-800); --krp-action-secondary-bg-hover: var(--krp-color-neutral-700); --krp-action-secondary-border: var(--krp-color-neutral-600); --krp-action-secondary-fg: var(--krp-color-neutral-50); --krp-action-ghost-bg-hover: var(--krp-color-neutral-800); --krp-action-destructive-bg: var(--krp-color-danger-500); --krp-action-destructive-bg-hover: var(--krp-color-danger-600); --krp-status-success-bg: rgba(31, 157, 85, 0.16); --krp-status-success-fg: #7EDBA0; --krp-status-warning-bg: rgba(204, 138, 0, 0.18); --krp-status-warning-fg: #F4C763; --krp-status-danger-bg: rgba(196, 48, 43, 0.18); --krp-status-danger-fg: #F39A95; --krp-status-info-bg: rgba(37, 99, 203, 0.18); --krp-status-info-fg: #94B8EE; --krp-status-neutral-bg: var(--krp-color-neutral-800); --krp-status-neutral-fg: var(--krp-color-neutral-200); --krp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --krp-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --krp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35); --krp-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4); --krp-shadow-focus: 0 0 0 3px rgba(93, 183, 171, 0.5); } /* Honor OS preference when [data-theme] is not explicitly set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --krp-bg-page: var(--krp-color-neutral-950); --krp-bg-surface: var(--krp-color-neutral-900); --krp-bg-surface-alt: var(--krp-color-neutral-800); --krp-bg-raised: var(--krp-color-neutral-800); --krp-bg-overlay: rgba(0, 0, 0, 0.6); --krp-bg-inverted: var(--krp-color-neutral-0); --krp-fg-default: var(--krp-color-neutral-50); --krp-fg-muted: var(--krp-color-neutral-300); --krp-fg-subtle: var(--krp-color-neutral-400); --krp-fg-disabled: var(--krp-color-neutral-600); --krp-fg-inverted: var(--krp-color-neutral-900); --krp-fg-link: var(--krp-color-brand-300); --krp-fg-link-hover: var(--krp-color-brand-200); --krp-border-default: var(--krp-color-neutral-700); --krp-border-strong: var(--krp-color-neutral-600); --krp-border-subtle: var(--krp-color-neutral-800); --krp-border-focus: var(--krp-color-brand-300); --krp-action-primary-bg: var(--krp-color-brand-400); --krp-action-primary-bg-hover: var(--krp-color-brand-300); --krp-action-primary-bg-active: var(--krp-color-brand-500); --krp-action-primary-fg: var(--krp-color-neutral-950); --krp-action-secondary-bg: var(--krp-color-neutral-800); --krp-action-secondary-bg-hover: var(--krp-color-neutral-700); --krp-action-secondary-border: var(--krp-color-neutral-600); --krp-action-secondary-fg: var(--krp-color-neutral-50); --krp-action-ghost-bg-hover: var(--krp-color-neutral-800); --krp-status-success-bg: rgba(31, 157, 85, 0.16); --krp-status-success-fg: #7EDBA0; --krp-status-warning-bg: rgba(204, 138, 0, 0.18); --krp-status-warning-fg: #F4C763; --krp-status-danger-bg: rgba(196, 48, 43, 0.18); --krp-status-danger-fg: #F39A95; --krp-status-info-bg: rgba(37, 99, 203, 0.18); --krp-status-info-fg: #94B8EE; --krp-status-neutral-bg: var(--krp-color-neutral-800); --krp-status-neutral-fg: var(--krp-color-neutral-200); --krp-shadow-focus: 0 0 0 3px rgba(93, 183, 171, 0.5); } } /* ============================================================================ Reduced motion — global escape hatch. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --krp-dur-fast: 1ms; --krp-dur-base: 1ms; --krp-dur-slow: 1ms; --krp-dur-slower: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }