/* Ka-PING Design Tokens v1.0 Bright theme is the default. Apply data-theme="dark" to or your app root. */ :root, [data-theme="bright"] { color-scheme: light; --kp-canvas: #F7FAFF; --kp-surface: #FFFFFF; --kp-surface-subtle: #EEF4FB; --kp-surface-raised: #FFFFFF; --kp-surface-brand: #0A1B32; --kp-text-primary: #081424; --kp-text-secondary: #51657A; --kp-text-tertiary: #607089; --kp-text-on-brand: #F7FAFF; --kp-border: #DDE7F3; --kp-border-strong: #B8C6D9; --kp-divider: #DDE7F3; --kp-accent: #0C85FB; --kp-accent-hover: #0BB2FB; --kp-accent-pressed: #0968C5; --kp-accent-content: #FFFFFF; --kp-focus-ring: #0C85FB; --kp-link: #0C85FB; --kp-signal-highlight: #0C85FB; --kp-glass-fill: rgba(255,255,255,.78); --kp-glass-border: rgba(8,20,36,.08); --kp-shadow-sm: 0 1px 2px rgba(8,20,36,.08); --kp-shadow-md: 0 8px 24px rgba(8,20,36,.12); --kp-shadow-lg: 0 20px 48px rgba(8,20,36,.16); --kp-brand-glow: 0 0 24px rgba(12,133,251,.24), 0 0 48px rgba(11,178,251,.12); } [data-theme="dark"] { color-scheme: dark; --kp-canvas: #050B13; --kp-surface: #081424; --kp-surface-subtle: #0A1B32; --kp-surface-raised: #0C213F; --kp-surface-brand: #0E2A50; --kp-text-primary: #F7FAFF; --kp-text-secondary: #B8C6D9; --kp-text-tertiary: #7FAFEB; --kp-text-on-brand: #F7FAFF; --kp-border: #203D65; --kp-border-strong: #305687; --kp-divider: #203D65; --kp-accent: #12E0FD; --kp-accent-hover: #39E8FD; --kp-accent-pressed: #0BB2FB; --kp-accent-content: #081424; --kp-focus-ring: #39E8FD; --kp-link: #39E8FD; --kp-signal-highlight: #12E0FD; --kp-glass-fill: rgba(12,33,63,.72); --kp-glass-border: rgba(57,232,253,.16); --kp-shadow-sm: 0 1px 2px rgba(0,0,0,.30); --kp-shadow-md: 0 10px 28px rgba(0,0,0,.36); --kp-shadow-lg: 0 24px 56px rgba(0,0,0,.44); --kp-brand-glow: 0 0 24px rgba(18,224,253,.32), 0 0 56px rgba(12,133,251,.20); } /* Brand primitives */ :root { --kp-navy-950: #081424; --kp-navy-900: #0A1B32; --kp-navy-850: #0C213F; --kp-navy-800: #0E2A50; --kp-steel-700: #203D65; --kp-steel-600: #305687; --kp-steel-500: #5684C5; --kp-steel-300: #7FAFEB; --kp-cyan-300: #39E8FD; --kp-cyan-400: #12E0FD; --kp-azure-400: #0BB2FB; --kp-blue-500: #0C85FB; --kp-gradient-signal: linear-gradient(135deg, #39E8FD 0%, #12E0FD 32%, #0BB2FB 62%, #0C85FB 100%); --kp-gradient-brand-tile: linear-gradient(180deg, #0E2A50 0%, #0A1B32 48%, #081424 100%); --kp-gradient-radio: linear-gradient(180deg, #7FAFEB 0%, #5684C5 28%, #305687 58%, #203D65 100%); --kp-radius-xs: 6px; --kp-radius-sm: 10px; --kp-radius-md: 14px; --kp-radius-lg: 18px; --kp-radius-xl: 24px; --kp-radius-brand: 28px; --kp-radius-2xl: 32px; --kp-radius-pill: 999px; --kp-space-1: 4px; --kp-space-2: 8px; --kp-space-3: 12px; --kp-space-4: 16px; --kp-space-5: 20px; --kp-space-6: 24px; --kp-space-8: 32px; --kp-space-10: 40px; --kp-space-12: 48px; --kp-space-16: 64px; --kp-duration-fast: 120ms; --kp-duration-standard: 180ms; --kp-duration-emphasis: 240ms; --kp-ease-standard: cubic-bezier(.2,0,0,1); --kp-ease-emphasis: cubic-bezier(.16,1,.3,1); } /* Recommended component primitives */ .kp-card { background: var(--kp-surface-raised); color: var(--kp-text-primary); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-xl); box-shadow: var(--kp-shadow-md); } .kp-button-primary { min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--kp-radius-md); background: var(--kp-accent); color: var(--kp-accent-content); font: 600 15px/20px Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; transition: background var(--kp-duration-standard) var(--kp-ease-standard), transform var(--kp-duration-fast) var(--kp-ease-standard), box-shadow var(--kp-duration-standard) var(--kp-ease-standard); } .kp-button-primary:hover { background: var(--kp-accent-hover); } .kp-button-primary:active { background: var(--kp-accent-pressed); transform: scale(.98); } .kp-button-primary:focus-visible { outline: 3px solid var(--kp-focus-ring); outline-offset: 3px; } .kp-brand-tile { background: var(--kp-gradient-brand-tile); border-radius: var(--kp-radius-brand); box-shadow: var(--kp-brand-glow); }