/* ============================================================ prime-aurora.css — GENERATED FILE. DO NOT EDIT MANUALLY. Source: packages/tokens/src/tokens.css Generator: packages/tokens/scripts/generate-aurora-css.mjs Generated: deterministic (no timestamp) ============================================================ */ /* @nextgenprime/tokens — Prime Aurora Design System Tokens Light mode is the :root default (high-contrast, WCAG 2.2 AA). Dark mode activates via [data-theme="dark"] or .dark on . */ /* ---------- LIGHT MODE (default) ---------- */ :root { /* Brand Color Palette (WCAG 2.2 AA Contrast Compliant) */ --ngp-purple-700: #4F32C3; --ngp-purple-600: #6A4BEE; --ngp-purple-500: #8B6CFF; --ngp-purple-400: #A38CFF; --ngp-purple-300: #C7C1EC; /* Semantic Color Tokens (Light - High Contrast) */ --ngp-bg: #FFFFFF; --ngp-bg-elevated: #F6F4FF; --ngp-surface-glass: rgba(255, 255, 255, 0.70); --ngp-border-glass: rgba(15, 23, 42, 0.12); --ngp-text-primary: #1A1236; --ngp-text-secondary: #4A427A; --ngp-accent: var(--ngp-purple-600); /* shadcn-compatible HSL aliases */ --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 251 83% 61%; --primary-foreground: 0 0% 100%; --secondary: 250 100% 96%; --secondary-foreground: 251 83% 35%; --muted: 250 100% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 250 100% 96%; --accent-foreground: 251 83% 35%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 251 83% 55%; --radius: 1rem; /* 8px Spacing Scale */ --ngp-space-1: 4px; --ngp-space-2: 8px; --ngp-space-3: 12px; --ngp-space-4: 16px; --ngp-space-5: 20px; --ngp-space-6: 24px; --ngp-space-7: 28px; --ngp-space-8: 32px; /* Touch Target Standard (Minimum 44px for Accessibility) */ --ngp-touch-min: 44px; --ngp-touch-target: 44px; /* Typography & Focus */ --ngp-font-heading: 'Sora', sans-serif; --ngp-font-body: 'Space Grotesk', sans-serif; --ngp-font-mono: 'JetBrains Mono', monospace; --ngp-focus-ring: 0 0 0 2px var(--ngp-purple-500); --ngp-focus-ring-color: var(--ngp-purple-500); --ngp-focus-ring-width: 2px; --ngp-letter-spacing-heading: -0.03em; --ngp-radius-card: 1rem; /* Surface & Border Semantic Tokens */ --ngp-surface: var(--ngp-bg); --ngp-surface-elevated: var(--ngp-bg-elevated); --ngp-surface-overlay: var(--ngp-surface-glass); --ngp-border: var(--ngp-border-glass); --ngp-border-subtle: rgba(15, 23, 42, 0.06); --ngp-border-strong: rgba(15, 23, 42, 0.2); /* Elevation / Shadow Scale */ --ngp-elevation-0: none; --ngp-elevation-1: 0 1px 3px rgba(15, 10, 45, 0.08); --ngp-elevation-2: 0 4px 12px rgba(15, 10, 45, 0.12); --ngp-elevation-3: 0 8px 24px rgba(15, 10, 45, 0.16); --ngp-elevation-4: 0 16px 48px rgba(15, 10, 45, 0.22); --ngp-shadow-glow: 0 0 20px 0 rgba(139, 108, 255, 0.45); /* Motion Tokens */ --ngp-motion-duration-fast: 150ms; --ngp-motion-duration-normal: 250ms; --ngp-motion-duration-slow: 400ms; --ngp-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --ngp-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --ngp-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Glassmorphism Surface Rule */ --ngp-glass-backdrop: blur(16px); --ngp-gradient-accent: linear-gradient(135deg, var(--ngp-purple-600), var(--ngp-purple-500)); } /* ---------- DARK MODE ---------- */ :root[data-theme="dark"], .dark { /* Semantic Color Tokens (Dark - Deep Indigo) */ --ngp-bg: #0F172A; --ngp-bg-elevated: #1E293B; --ngp-surface-glass: rgba(255, 255, 255, 0.07); --ngp-border-glass: rgba(255, 255, 255, 0.12); --ngp-text-primary: #F4F2FF; --ngp-text-secondary: #C7C1EC; --ngp-accent: var(--ngp-purple-500); --background: 222.2 47.4% 11.2%; --foreground: 210 40% 98%; --card: 217.2 32.6% 17.5%; --card-foreground: 210 40% 98%; --popover: 217.2 32.6% 17.5%; --popover-foreground: 210 40% 98%; --primary: 251 83% 61%; --primary-foreground: 210 40% 98%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 251 83% 61%; /* Surface & Border Semantic Tokens (Dark) */ --ngp-surface: var(--ngp-bg); --ngp-surface-elevated: var(--ngp-bg-elevated); --ngp-surface-overlay: var(--ngp-surface-glass); --ngp-border: var(--ngp-border-glass); --ngp-border-subtle: rgba(255, 255, 255, 0.06); --ngp-border-strong: rgba(255, 255, 255, 0.2); /* Elevation / Shadow Scale (Dark - deeper) */ --ngp-elevation-0: none; --ngp-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); --ngp-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.35); --ngp-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.4); --ngp-elevation-4: 0 16px 48px rgba(0, 0, 0, 0.5); } /* RTL / Logical Properties Support (Urdu & Arabic Compatibility) */ html[dir="rtl"] { text-align: start; } .margin-start { margin-inline-start: var(--ngp-space-4); } .padding-start { padding-inline-start: var(--ngp-space-4); } /* Reduced Motion Overrides */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- COMPONENT PRIMITIVES (shared layer) ---------- Phase 1 hardening: -0.03em heading tracking + 1.15 heading line-height, keyboard-only focus rings, variant hover states, status pulse dots. */ h1, h2, h3, h4 { letter-spacing: -0.03em; line-height: 1.15; } .ngp-btn:focus-visible, .ngp-card-interactive:focus-visible, .ngp-link:focus-visible { outline: 2px solid var(--ngp-focus-ring-color, #8B6CFF); outline-offset: 2px; } .ngp-btn[data-variant="primary"]:hover:not(:disabled), .ngp-btn[data-variant="danger"]:hover:not(:disabled) { filter: brightness(1.07); } .ngp-btn[data-variant="secondary"]:hover:not(:disabled) { border-color: var(--ngp-border-strong, rgba(255,255,255,0.2)); } .ngp-btn[data-variant="ghost"]:hover:not(:disabled) { background: var(--ngp-surface-overlay, rgba(255,255,255,0.06)); } .ngp-pulse-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; position: relative; flex: 0 0 auto; } .ngp-pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: currentColor; opacity: 0.6; animation: ngp-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes ngp-pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } /* ---------- LEGACY COMPATIBILITY ALIASES ---------- These aliases preserve the 36/36 edge probe contract and existing app CSS that references older names. */ :root { --bg-primary: var(--ngp-bg); --bg-secondary: var(--ngp-bg-elevated); --text-primary: var(--ngp-text-primary); --text-secondary: var(--ngp-text-secondary); --purple-700: var(--ngp-purple-700); --purple-600: var(--ngp-purple-600); --purple-500: var(--ngp-purple-500); --purple-400: var(--ngp-purple-400); --purple-300: var(--ngp-purple-300); --glass-surface: var(--ngp-surface-glass); --glass-border: var(--ngp-border-glass); --accent: var(--ngp-accent); --gradient-accent: var(--ngp-gradient-accent); --shadow-glow: var(--ngp-shadow-glow); --focus-ring: var(--ngp-focus-ring); --font-heading: var(--ngp-font-heading); --font-body: var(--ngp-font-body); --font-mono: var(--ngp-font-mono); --space-1: var(--ngp-space-1); --space-2: var(--ngp-space-2); --space-3: var(--ngp-space-3); --space-4: var(--ngp-space-4); --space-5: var(--ngp-space-5); --space-6: var(--ngp-space-6); --space-7: var(--ngp-space-7); --space-8: var(--ngp-space-8); --touch-min: var(--ngp-touch-min); } /* Glassmorphism utility (legacy) */ .prime-glass { background: var(--ngp-surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ngp-border-glass); box-shadow: var(--ngp-shadow-glow); } /* SwiftNine micro-animation compatibility */ .swift-hidden { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .swift-visible { opacity: 1; transform: translateY(0); } /* ---------- SHARED MOTION KEYFRAMES ---------- */ @keyframes ngp-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes ngp-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes ngp-spin { to { transform: rotate(360deg); } } @keyframes ngp-pop { 0% { opacity: 0; transform: scale(0.96); } 60% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } .ngp-anim-fade-up { animation: ngp-fade-up 0.35s ease-out both; } .ngp-anim-pop { animation: ngp-pop 0.25s ease-out both; } .ngp-skeleton { position: relative; overflow: hidden; background: linear-gradient( 90deg, var(--ngp-surface-glass, rgba(255,255,255,0.06)) 0%, var(--ngp-surface-glass, rgba(255,255,255,0.06)) 40%, rgba(139, 108, 255, 0.14) 50%, var(--ngp-surface-glass, rgba(255,255,255,0.06)) 60%, var(--ngp-surface-glass, rgba(255,255,255,0.06)) 100% ); background-size: 800px 100%; animation: ngp-shimmer 1.6s linear infinite; } .ngp-card-interactive:hover { transform: translateY(-4px); border-color: rgba(139, 108, 255, 0.45); box-shadow: 0 12px 32px rgba(15, 10, 45, 0.45), 0 0 0 1px rgba(139, 108, 255, 0.15); }