@astralform/ui 0.0.0-stage → 0.3.7-next.0

package/src/styles/base.css

@@ -0,0 +1,779 @@
+/* ==============================================
+   @astralform/ui — base.css (brand-agnostic structure)
+   ==============================================
+
+   Everything that does NOT change per brand: radius scale, layout
+   dimensions, base element styles, the @utility set the components
+   rely on (focus-ring, type-*, page-content), and the full animation /
+   keyframe / enhancement library.
+
+   Pair this with EXACTLY ONE theme file (theme-default.css or your own
+   product theme generated from a DESIGN.md). Consumer order:
+
+     @import "tailwindcss";
+     @import "@astralform/ui/styles/base.css";
+     @import "@astralform/ui/styles/theme-default.css";
+     @source "../node_modules/@astralform/ui/dist";   // Tailwind v4 must scan our classes
+   ============================================== */
+
+@import "./tokens/_foundations.css";
+@import "./tokens/_semantics.css";
+
+/* ============================================
+   STRUCTURAL DESIGN TOKENS (brand-independent)
+   ============================================ */
+
+@theme inline {
+  /* Semantic Radius */
+  --radius-input: 0.5rem;
+  --radius-button: 0.5rem;
+  --radius-card: 1.25rem;
+  --radius-modal: 0.75rem;
+  --radius-badge: 9999px;
+  --radius-alert: 0.5rem;
+
+  /* Layout Dimensions — app-shell widths consumed by each product's layout.
+     Tailwind v4 maps --width-* to w-* and --spacing-* to padding utilities. */
+  --width-sidebar: 12rem;
+  --width-sidebar-collapsed: 3.25rem;
+  --width-workspace: 28rem;
+  --height-header: 4rem;
+  --spacing-sidebar: 12rem;
+  --spacing-sidebar-collapsed: 3.25rem;
+  --spacing-workspace: 28rem;
+}
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-surface-base text-text-primary antialiased;
+    font-family: var(--font-body);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    @apply tracking-tight;
+  }
+}
+
+/* ============================================
+   DESIGN SYSTEM UTILITIES
+   ============================================ */
+
+/* Unified focus ring — replaces 4+ different focus ring patterns */
+@utility focus-ring {
+  &:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+}
+
+/* Typography role utilities */
+@utility type-page-title {
+  font-size: var(--type-page-title-size);
+  font-weight: var(--type-page-title-weight);
+  line-height: var(--type-page-title-leading);
+  font-family: var(--type-page-title-family);
+  color: var(--color-text-primary);
+}
+
+@utility type-card-title {
+  font-size: var(--type-card-title-size);
+  font-weight: var(--type-card-title-weight);
+  line-height: var(--type-card-title-leading);
+  letter-spacing: var(--type-card-title-tracking);
+  font-family: var(--type-card-title-family);
+  color: var(--color-text-primary);
+}
+
+@utility type-label {
+  font-size: var(--type-label-size);
+  font-weight: var(--type-label-weight);
+  line-height: var(--type-label-leading);
+  color: var(--color-text-secondary);
+}
+
+/* Page content padding utility — replaces repeated `px-6 lg:px-16` */
+@utility page-content {
+  padding-left: clamp(1rem, 4%, 4rem);
+  padding-right: clamp(1rem, 4%, 4rem);
+}
+
+/* ============================================
+   ANIMATION KEYFRAMES
+   ============================================ */
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInScale {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-10px) rotate(1deg); }
+}
+
+@keyframes pulseGlow {
+  0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }
+  50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.4); }
+}
+
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+@keyframes drawCheck {
+  0% { stroke-dashoffset: 100; }
+  100% { stroke-dashoffset: 0; }
+}
+
+@keyframes scaleBounce {
+  0% { transform: scale(0); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+@keyframes confettiFall {
+  0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
+  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+@keyframes staggerFadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ============================================
+   UTILITY CLASSES
+   ============================================ */
+
+.animate-fade-in-up {
+  opacity: 0;
+  animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
+}
+
+.animate-fade-in-scale {
+  opacity: 0;
+  animation: fadeInScale 0.5s var(--ease-out-expo) forwards;
+}
+
+.animate-float { animation: float 6s ease-in-out infinite; }
+.animate-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradientShift 8s ease infinite;
+}
+
+.animate-draw-check {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: drawCheck 0.5s var(--ease-out-expo) 0.2s forwards;
+}
+
+.animate-scale-bounce { animation: scaleBounce 0.5s var(--ease-out-back) forwards; }
+
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+/* Text shimmer for ThinkingBlock — gradient sweeps across text */
+.thinking-shimmer-text {
+  background: linear-gradient(
+    90deg,
+    var(--color-text-muted) 0%,
+    var(--color-text-muted) 40%,
+    var(--color-text-secondary) 50%,
+    var(--color-text-muted) 60%,
+    var(--color-text-muted) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+/* Stagger delays */
+.stagger-1 { animation-delay: 0.1s; }
+.stagger-2 { animation-delay: 0.2s; }
+.stagger-3 { animation-delay: 0.3s; }
+.stagger-4 { animation-delay: 0.4s; }
+.stagger-5 { animation-delay: 0.5s; }
+.stagger-6 { animation-delay: 0.6s; }
+
+.animate-on-load { opacity: 0; }
+
+/* ============================================
+   BACKGROUND PATTERNS & TEXTURES
+   ============================================ */
+
+.bg-dot-pattern {
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.bg-gradient-orbs::before,
+.bg-gradient-orbs::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.bg-gradient-orbs::before {
+  width: 400px;
+  height: 400px;
+  background: linear-gradient(135deg, rgba(63, 63, 70, 0.6), rgba(39, 39, 42, 0.4));
+  top: -100px;
+  right: -100px;
+}
+
+.bg-gradient-orbs::after {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(135deg, rgba(63, 63, 70, 0.4), rgba(39, 39, 42, 0.3));
+  bottom: -50px;
+  left: -50px;
+}
+
+.bg-noise::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: 0.03;
+  pointer-events: none;
+}
+
+/* ============================================
+   COMPONENT ENHANCEMENTS
+   ============================================ */
+
+.btn-press { transition: all 0.15s var(--ease-out-expo); }
+.btn-press:active { transform: scale(0.97); }
+
+.btn-gradient {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s var(--ease-out-expo);
+}
+
+.btn-gradient::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.btn-gradient:hover::before { opacity: 1; }
+
+.btn-gradient:hover {
+  box-shadow: 0 10px 40px -10px rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.card-hover { transition: all 0.3s var(--ease-out-expo); }
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px -15px rgba(255, 255, 255, 0.1);
+}
+
+.feature-card {
+  position: relative;
+  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
+}
+
+.feature-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 32px -8px rgba(255, 255, 255, 0.1);
+}
+
+.animated-border {
+  --border-width: 2px;
+  --border-progress: 0;
+  transition: opacity 0.3s ease;
+}
+
+.animated-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--border-width);
+  background: conic-gradient(
+    from -90deg,
+    #ffffff 0%,
+    #a1a1aa calc(var(--border-progress) * 50%),
+    #71717a calc(var(--border-progress) * 100%),
+    transparent calc(var(--border-progress) * 100%),
+    transparent 100%
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: border-fill 0.6s var(--ease-out-expo) forwards;
+}
+
+@keyframes border-fill {
+  from { --border-progress: 0; }
+  to { --border-progress: 1; }
+}
+
+@property --border-progress {
+  syntax: '<number>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@property --active {
+  syntax: '<number>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@property --start {
+  syntax: '<number>';
+  initial-value: 0;
+  inherits: false;
+}
+
+.icon-container {
+  @apply relative flex items-center justify-center rounded-xl;
+  transition: all 0.3s var(--ease-out-expo);
+}
+
+.feature-card:hover .icon-container { transform: scale(1.1); }
+
+/* ============================================
+   SUCCESS CELEBRATION STYLES
+   ============================================ */
+
+.success-circle {
+  @apply relative flex items-center justify-center;
+  width: 80px;
+  height: 80px;
+}
+
+.success-circle::before {
+  content: '';
+  position: absolute;
+  width: 96px;
+  height: 96px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--_success-muted) 20%, transparent), color-mix(in srgb, var(--_success) 10%, transparent));
+  animation: successCircleBounce 0.6s var(--ease-out-back) forwards;
+}
+
+@keyframes successCircleBounce {
+  0% { transform: translate(-50%, -50%) scale(0); }
+  50% { transform: translate(-50%, -50%) scale(1.2); }
+  100% { transform: translate(-50%, -50%) scale(1); }
+}
+
+.confetti-container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 100;
+}
+
+.confetti-piece {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: -20px;
+  animation: confettiFall 3s linear forwards;
+}
+
+/* ============================================
+   HERO CHAT MOCKUP ENHANCEMENTS
+   ============================================ */
+
+.chat-mockup {
+  @apply relative;
+  animation: float 6s ease-in-out infinite, fadeInScale 0.8s var(--ease-out-expo) 0.3s forwards;
+  opacity: 0;
+}
+
+.chat-mockup::before {
+  content: '';
+  position: absolute;
+  inset: -20px;
+  background: linear-gradient(135deg, rgba(63, 63, 70, 0.3), rgba(39, 39, 42, 0.2));
+  border-radius: 30px;
+  filter: blur(20px);
+  z-index: -1;
+}
+
+.typing-indicator { @apply flex gap-1; }
+
+.typing-indicator span {
+  @apply w-2 h-2 rounded-full bg-text-muted;
+  animation: typingBounce 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(1) { animation-delay: 0s; }
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes typingBounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-4px); }
+}
+
+/* ============================================
+   MODAL ENHANCEMENTS
+   ============================================ */
+
+.modal-backdrop {
+  @apply fixed inset-0 bg-surface-overlay backdrop-blur-sm;
+  animation: fadeIn 0.2s ease forwards;
+}
+
+.modal-content {
+  animation: modalEnter 0.3s var(--ease-out-back) forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modalEnter {
+  from { opacity: 0; transform: scale(0.95) translateY(10px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* ============================================
+   NAVIGATION ENHANCEMENTS
+   ============================================ */
+
+.nav-link { @apply relative; }
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, rgb(255, 255, 255), rgb(161, 161, 170));
+  transition: width 0.3s var(--ease-out-expo);
+}
+
+.nav-link:hover::after { width: 100%; }
+
+/* Sidebar group connector lines */
+.sidebar-connector-item {
+  position: relative;
+  padding-left: 28px;
+}
+
+.sidebar-connector-item::before {
+  content: '';
+  position: absolute;
+  left: 14px;
+  top: 0;
+  bottom: 0;
+  border-left: 1.5px dashed rgb(63, 63, 70);
+  pointer-events: none;
+}
+
+.sidebar-connector-item:last-child::before { bottom: 50%; }
+
+.sidebar-connector-item::after {
+  content: '';
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  width: 10px;
+  border-top: 1.5px dashed rgb(63, 63, 70);
+  pointer-events: none;
+}
+
+.ease-out-expo { transition-timing-function: var(--ease-out-expo); }
+
+.logo-hover { transition: all 0.3s var(--ease-out-expo); }
+.logo-hover:hover { transform: scale(1.05); }
+.logo-hover:hover .logo-icon { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
+
+/* ============================================
+   INPUT ENHANCEMENTS
+   ============================================ */
+
+.input-enhanced { @apply transition-all duration-300; }
+
+.input-enhanced:focus {
+  @apply ring-2 ring-white/30;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
+}
+
+/* ============================================
+   SCROLLBAR HIDE UTILITY
+   ============================================ */
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar { display: none; }
+
+/* ============================================
+   SCROLLBAR STYLING
+   ============================================ */
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: rgb(23, 23, 23); border-radius: 4px; }
+::-webkit-scrollbar-thumb { background: rgb(63, 63, 70); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgb(82, 82, 91); }
+
+/* ============================================
+   SELECTION STYLING
+   ============================================ */
+
+::selection {
+  background: rgba(255, 255, 255, 0.2);
+  color: rgb(255, 255, 255);
+}
+
+/* ============================================
+   GLOWING EFFECT COMPONENT
+   ============================================ */
+
+.glow {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+/* ============================================
+   MARQUEE ANIMATION
+   ============================================ */
+
+@keyframes marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(calc(-100% - var(--gap))); }
+}
+
+.animate-marquee { animation: marquee var(--duration) linear infinite; }
+
+/* ============================================
+   SCROLL SNAP UTILITIES
+   ============================================ */
+
+.scroll-snap-y-mandatory { scroll-snap-type: y mandatory; }
+.scroll-snap-start { scroll-snap-align: start; }
+.scroll-snap-stop { scroll-snap-stop: always; }
+
+/* ============================================
+   DOT INDICATOR ANIMATIONS
+   ============================================ */
+
+@keyframes dotPulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
+  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
+}
+
+.animate-dot-pulse { animation: dotPulse 2s ease-in-out infinite; }
+
+/* ============================================
+   LIQUID GLOB — animated highlight inside a rounded square
+   ============================================ */
+
+@keyframes liquid-move {
+  0%, 100% { top: 0px; left: 0px; }
+  25% { top: 0px; left: 4px; }
+  50% { top: 4px; left: 3px; }
+  75% { top: 3px; left: 0px; }
+}
+
+@keyframes morphDot {
+  0% { border-radius: 50%; }
+  50% { border-radius: 25%; }
+  100% { border-radius: 50%; }
+}
+
+@keyframes spinDot {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.thinking-morph-dot {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background: radial-gradient(circle at 35% 35%, var(--color-accent-hover), var(--color-accent) 50%, var(--color-accent-muted));
+  border-radius: 50%;
+  animation: morphDot 2s ease-in-out infinite, spinDot 3s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes pill-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.animate-pill-shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.06) 45%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.06) 55%,
+    transparent 100%
+  );
+  animation: pill-shimmer 2s ease-in-out infinite;
+}
+
+.animate-dot-enter { animation: fadeInScale 0.3s var(--ease-out-expo) forwards; }
+
+/* ============================================
+   CHROMA BUTTON ANIMATION
+   ============================================ */
+
+@property --chroma-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes chromaSpin {
+  from { --chroma-angle: 0deg; }
+  to { --chroma-angle: 360deg; }
+}
+
+.animate-chroma-spin { animation: chromaSpin 3s linear infinite; }
+
+/* ============================================
+   SONNER TOAST OVERRIDES
+   ============================================ */
+
+[data-sonner-toaster] {
+  font-family: var(--font-body), system-ui, sans-serif !important;
+}
+
+[data-sonner-toast] {
+  --normal-bg: var(--color-surface-secondary) !important;
+  --normal-border: var(--color-border-primary) !important;
+  --normal-text: var(--color-text-primary) !important;
+  border-radius: 10px !important;
+  padding: 12px 16px !important;
+  font-size: 13px !important;
+  line-height: 1.5 !important;
+  gap: 8px !important;
+  align-items: center !important;
+  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(63, 63, 70, 0.4) !important;
+}
+
+[data-sonner-toast] [data-icon] { flex-shrink: 0 !important; }
+
+[data-sonner-toast] [data-content] {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 2px !important;
+}
+
+[data-sonner-toast] [data-title] {
+  font-weight: 500 !important;
+  font-size: 13px !important;
+  line-height: 1.4 !important;
+}
+
+[data-sonner-toast] [data-description] {
+  font-size: 12px !important;
+  opacity: 0.7 !important;
+  line-height: 1.4 !important;
+}
+
+[data-sonner-toast][data-type="success"] {
+  --normal-bg: var(--_toast-success-bg) !important;
+  --normal-border: var(--_toast-success-border) !important;
+  --normal-text: var(--_toast-success-text) !important;
+}
+
+[data-sonner-toast][data-type="error"] {
+  --normal-bg: var(--_toast-error-bg) !important;
+  --normal-border: var(--_toast-error-border) !important;
+  --normal-text: var(--_toast-error-text) !important;
+}
+
+[data-sonner-toast][data-type="warning"] {
+  --normal-bg: var(--_toast-warning-bg) !important;
+  --normal-border: var(--_toast-warning-border) !important;
+  --normal-text: var(--_toast-warning-text) !important;
+}
+
+[data-sonner-toast][data-type="info"] {
+  --normal-bg: var(--_toast-info-bg) !important;
+  --normal-border: var(--_toast-info-border) !important;
+  --normal-text: var(--_toast-info-text) !important;
+}
+
+[data-sonner-toast] [data-close-button] {
+  background: transparent !important;
+  border: 1px solid var(--color-border-secondary) !important;
+  color: var(--color-text-tertiary) !important;
+}
+
+[data-sonner-toast] [data-close-button]:hover {
+  background: var(--color-surface-tertiary) !important;
+  color: var(--color-text-primary) !important;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}