@krizaka/sovkora-design-system 0.0.0-stage → 4.0.0

package/src/theme.css

@@ -0,0 +1,859 @@
+/* @krizaka/sovkora-design-system/theme.css — Sovkora Orange, expressed as roles.
+
+   The app's global stylesheet, two lines:
+     @import "tailwindcss";
+     @import "@krizaka/sovkora-design-system/theme.css";
+
+   This file brings the platform layers itself (the @krizaka/tailwind preset: --kz-* tokens, role utilities, the
+   dark: variant, motion; and the @krizaka/ui sources), then overrides the values of the --kz-* roles. It holds no
+   palette and no variant: a theme is a set of token values, never a set of classes.
+
+   Theme mechanism — the organisation's:
+     dark       the default, on :root (and the `.theme-dark` island, which stays dark inside a light page);
+     light      html.light;
+     a named theme   html.theme-<name> (electric, custom, cyberpunk, solarized, krizaka) — orthogonal to the mode.
+
+   The identity is the Sovkora brand theme of @krizaka/tokens (packages/tokens/BRAND.md): orange, taken from the
+   Sovkora mark — never re-declared here. Electric Blue, the 2.x identity, stays as the named theme `electric`.
+
+   Every text / on-accent pair is tested at WCAG AA (4.5:1), the muted text at 3:1 and the focus ring at 3:1, in every
+   theme (src/__tests__/theme.test.ts). Product tokens are prefixed --sovkora-*. */
+
+@import "@krizaka/tailwind";
+@import "@krizaka/ui/tailwind.css";
+@import "@krizaka/tokens/brands/sovkora.css";
+
+/* The design system declares its own sources: @source resolves relative to this file, so every app that imports
+   theme.css gets the utilities its components use — from the workspace or from node_modules alike. */
+@source "./";
+
+/* ═══════════════════════════════════════════════════
+   SOVKORA ORANGE — dark (the default) and light
+   ═══════════════════════════════════════════════════ */
+
+/* The accent family and the section gradient: @krizaka/tokens/brands/sovkora.css (imported above). Dark: orange
+   hsl(26 92% 55%) under near-black text (7.4:1), the hover lightens; light: the deep orange #b45309 under white
+   (5.1:1). The surfaces, borders and text stay the platform's. Only the product tokens are declared here. */
+:root,
+.theme-dark {
+  --sovkora-grid-color: hsl(0 0% 100% / 0.02);
+}
+
+html.light {
+  --sovkora-grid-color: hsl(0 0% 0% / 0.03);
+}
+
+/* ═══════════════════════════════════════════════════
+   NAMED THEMES — html.theme-<name>
+   A named theme sets every colour role, so it reads the same in either mode. The class also works as an island:
+   an element carrying `.theme-<name>` takes that theme inside any page (a theme picker's previews), as
+   `.theme-dark` does for dark. `html.theme-<name>` stays first: it must outweigh `html.light` on the root.
+   ═══════════════════════════════════════════════════ */
+
+/* Electric Blue — the 2.x identity, kept for the users who chose it. White on hsl(217 92% 60%) reads 3.6:1: the
+   accent carries near-black text (5.4:1), the hover lightens (6.6:1). */
+html.theme-electric,
+.theme-electric {
+  color-scheme: dark;
+  --kz-surface-0: hsl(240 6% 5%);
+  --kz-surface-1: hsl(240 5% 9%);
+  --kz-surface-2: hsl(240 5% 13%);
+  --kz-surface-3: hsl(240 4% 17%);
+  --kz-border-subtle: hsl(0 0% 100% / 0.06);
+  --kz-border-default: hsl(0 0% 100% / 0.1);
+  --kz-border-strong: hsl(0 0% 100% / 0.16);
+  --kz-text-primary: hsl(0 0% 96%);
+  --kz-text-secondary: hsl(240 4% 64%);
+  --kz-text-muted: hsl(240 4% 47%);
+  --kz-accent: hsl(217 92% 60%);
+  --kz-accent-hover: hsl(217 92% 66%);
+  --kz-accent-soft: hsl(217 92% 60% / 0.12);
+  --kz-accent-text: hsl(217 92% 68%);
+  --kz-accent-2: hsl(217 92% 60%);
+  --kz-on-accent: hsl(240 6% 5%);
+  --kz-ring: hsl(217 92% 60%);
+  --kz-info: hsl(217 92% 60%);
+  --kz-brand-gradient-from: hsl(222 45% 10%);
+  --kz-brand-gradient-via: hsl(232 24% 7%);
+  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --sovkora-grid-color: hsl(0 0% 100% / 0.02);
+}
+
+/* Deep Violet. */
+html.theme-custom,
+.theme-custom {
+  color-scheme: dark;
+  --kz-surface-0: hsl(270 100% 2%);
+  --kz-surface-1: hsl(260 50% 6%);
+  --kz-surface-2: hsl(260 30% 10%);
+  --kz-surface-3: hsl(260 24% 14%);
+  --kz-border-subtle: hsl(0 0% 100% / 0.08);
+  --kz-border-default: hsl(0 0% 100% / 0.12);
+  --kz-border-strong: hsl(0 0% 100% / 0.18);
+  --kz-text-primary: hsl(220 14% 96%);
+  --kz-text-secondary: hsl(262 83% 76%);
+  --kz-text-muted: hsl(240 5% 46%);
+  --kz-accent: hsl(271 91% 65%);
+  --kz-accent-hover: hsl(271 91% 72%);
+  --kz-accent-soft: hsl(271 91% 65% / 0.12);
+  --kz-on-accent: hsl(240 6% 5%);
+  --kz-accent-text: hsl(271 91% 72%);
+  --kz-accent-2: var(--kz-accent);
+  --kz-ring: var(--kz-accent);
+  --kz-info: var(--kz-accent);
+  --kz-brand-gradient-from: var(--kz-surface-1);
+  --kz-brand-gradient-via: var(--kz-surface-0);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+  --sovkora-grid-color: hsl(0 0% 100% / 0.02);
+}
+
+/* Neon Matrix. */
+html.theme-cyberpunk,
+.theme-cyberpunk {
+  color-scheme: dark;
+  --kz-surface-0: hsl(272 100% 2%);
+  --kz-surface-1: hsl(275 63% 8%);
+  --kz-surface-2: hsl(272 55% 11%);
+  --kz-surface-3: hsl(272 48% 15%);
+  --kz-border-subtle: hsl(163 100% 50% / 0.12);
+  --kz-border-default: hsl(296 100% 50% / 0.25);
+  --kz-border-strong: hsl(163 100% 50% / 0.35);
+  --kz-text-primary: hsl(163 100% 50%);
+  --kz-text-secondary: hsl(163 100% 75%);
+  --kz-text-muted: hsl(163 33% 36%);
+  --kz-accent: hsl(296 100% 50%);
+  --kz-accent-hover: hsl(296 100% 60%);
+  --kz-accent-soft: hsl(296 100% 50% / 0.12);
+  --kz-on-accent: hsl(240 6% 5%);
+  --kz-accent-text: hsl(296 100% 66%);
+  --kz-accent-2: var(--kz-accent);
+  --kz-ring: var(--kz-accent);
+  --kz-info: var(--kz-accent);
+  --kz-brand-gradient-from: var(--kz-surface-1);
+  --kz-brand-gradient-via: var(--kz-surface-0);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+  --sovkora-grid-color: hsl(163 100% 50% / 0.03);
+}
+
+/* Warm Parchment — a light theme. The text is darker than the 1.x values (3.7:1 → 6.8:1) to read at AA. */
+html.theme-solarized,
+.theme-solarized {
+  color-scheme: light;
+  --kz-surface-0: hsl(44 87% 94%);
+  --kz-surface-1: hsl(44 52% 87%);
+  --kz-surface-2: hsl(44 38% 84%);
+  --kz-surface-3: hsl(44 30% 81%);
+  --kz-border-subtle: hsl(0 0% 0% / 0.06);
+  --kz-border-default: hsl(186 5% 60% / 0.35);
+  --kz-border-strong: hsl(186 5% 60% / 0.5);
+  --kz-text-primary: hsl(192 14% 25%);
+  --kz-text-secondary: hsl(192 14% 32%);
+  --kz-text-muted: hsl(186 5% 42%);
+  --kz-accent: hsl(205 71% 49%);
+  --kz-accent-hover: hsl(205 71% 55%);
+  --kz-accent-soft: hsl(205 71% 49% / 0.12);
+  --kz-on-accent: hsl(240 6% 5%);
+  --kz-accent-text: hsl(205 80% 32%);
+  --kz-accent-2: var(--kz-accent);
+  --kz-ring: var(--kz-accent);
+  --kz-info: var(--kz-accent);
+  --kz-brand-gradient-from: var(--kz-surface-1);
+  --kz-brand-gradient-via: var(--kz-surface-0);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+  --sovkora-grid-color: hsl(0 0% 0% / 0.03);
+}
+
+/* Deep Obsidian Razor: pitch-black surfaces, zero-radius edges, frosted ice-blue outlines, cold-steel accent. */
+html.theme-krizaka,
+.theme-krizaka {
+  color-scheme: dark;
+  --kz-surface-0: hsl(240 18% 4%);
+  --kz-surface-1: hsl(240 14% 7%);
+  --kz-surface-2: hsl(240 10% 11%);
+  --kz-surface-3: hsl(240 8% 15%);
+  --kz-border-subtle: hsl(210 40% 80% / 0.06);
+  --kz-border-default: hsl(210 40% 80% / 0.1);
+  --kz-border-strong: hsl(210 40% 80% / 0.18);
+  --kz-text-primary: hsl(210 20% 92%);
+  --kz-text-secondary: hsl(210 12% 60%);
+  --kz-text-muted: hsl(210 8% 46%);
+  --kz-accent: hsl(210 60% 55%);
+  --kz-accent-hover: hsl(210 60% 62%);
+  --kz-accent-soft: hsl(210 60% 55% / 0.12);
+  --kz-on-accent: hsl(240 6% 5%);
+  --kz-radius-sm: 0px;
+  --kz-radius-md: 0px;
+  --kz-radius-lg: 0px;
+  --kz-radius-xl: 0px;
+  --kz-shadow-sm: 0 1px 3px hsl(210 40% 10% / 0.3), 0 1px 2px hsl(210 40% 10% / 0.15);
+  --kz-shadow-md: 0 4px 12px hsl(210 40% 10% / 0.25), 0 2px 4px hsl(210 40% 10% / 0.1);
+  --kz-shadow-lg: 0 8px 24px hsl(210 40% 10% / 0.3), 0 4px 8px hsl(210 40% 10% / 0.12);
+  --kz-accent-text: hsl(210 60% 66%);
+  --kz-accent-2: var(--kz-accent);
+  --kz-ring: var(--kz-accent);
+  --kz-info: var(--kz-accent);
+  --kz-brand-gradient-from: var(--kz-surface-1);
+  --kz-brand-gradient-via: var(--kz-surface-0);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+  --sovkora-grid-color: hsl(210 40% 80% / 0.02);
+}
+
+/* ═══════════════════════════════════════════════════
+   INVARIANTS & PRODUCT TOKENS
+   ═══════════════════════════════════════════════════ */
+
+:root {
+  /* Fonts: the faces the apps load with next/font (--font-krizaka-*, --font-inter…), with fallbacks. */
+  --kz-font-sans: var(--font-inter, Inter), system-ui, -apple-system, "Segoe UI", sans-serif;
+  --kz-font-display: var(--font-krizaka-display, var(--font-outfit, Outfit)), var(--font-inter, Inter), sans-serif;
+  --kz-font-mono:
+    var(--font-krizaka-mono, var(--font-jetbrains-mono, "JetBrains Mono")), "SF Mono", ui-monospace, monospace;
+
+  /* Product tokens: prefixed, never generic. */
+  --sovkora-accent-glow: 0 0 0 3px color-mix(in oklab, var(--kz-accent) 12%, transparent);
+  --sovkora-space-card: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
+  --sovkora-space-section: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
+
+  /* The Sovkora fluid type scale: it replaces Tailwind's text-xs … text-2xl sizes (text-display is Sovkora's). */
+  --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
+  --text-sm: clamp(0.8125rem, 0.77rem + 0.18vw, 0.875rem);
+  --text-base: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
+  --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
+  --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
+  --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
+  --text-display: clamp(2rem, 1.6rem + 1.6vw, 3rem);
+}
+
+/* ═══════════════════════════════════════════════════
+   BASE — Typography & Body
+   ═══════════════════════════════════════════════════ */
+
+body {
+  background: var(--kz-surface-0);
+  color: var(--kz-text-primary);
+  font-family: var(--kz-font-sans);
+  font-size: var(--text-base);
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  letter-spacing: -0.018em;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Display headings use Krizaka Display → Outfit fallback */
+h1,
+h2,
+.text-display {
+  font-family: var(--kz-font-display);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+/* Mono contexts: data tables, console nodes, prompt streams */
+code,
+pre,
+.font-mono {
+  font-family: var(--kz-font-mono) !important;
+}
+
+/* ═══════════════════════════════════════════════════
+   SCROLLBARS — Ultra-thin, themed (4px)
+   ═══════════════════════════════════════════════════ */
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--kz-text-muted);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--kz-text-secondary);
+}
+
+/* ═══════════════════════════════════════════════════
+   KEYFRAMES — Motion System (purposeful only)
+   ═══════════════════════════════════════════════════ */
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-6px);
+  }
+  40% {
+    transform: translateX(6px);
+  }
+  60% {
+    transform: translateX(-4px);
+  }
+  80% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toast-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.95);
+  }
+}
+
+@keyframes gradient-mesh {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes counter-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes breathing-glow {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 0 transparent,
+      0 0 8px transparent;
+  }
+  50% {
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--kz-accent) 8%, transparent),
+      0 0 16px color-mix(in oklab, var(--kz-accent) 6%, transparent);
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.6;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0.6;
+  }
+}
+
+@keyframes text-reveal {
+  from {
+    clip-path: inset(0 0 100% 0);
+    transform: translateY(30px);
+    opacity: 0;
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes blur-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+    filter: blur(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+@keyframes typewriter-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes typewriter-reveal {
+  from {
+    max-width: 0;
+  }
+  to {
+    max-width: 100%;
+  }
+}
+
+/* ═══════════════════════════════════════════════════
+   KRIZAKA LAYOUT — Icon Rail & Input Dock
+   ─────────────────────────────────────────────────
+   .krizaka-navbar: 56px icon-only rail with frosted
+   glass backdrop and bottom-anchored user avatar.
+   .typewriter-cursor: blinking caret for greeting.
+   ═══════════════════════════════════════════════════ */
+
+.krizaka-navbar {
+  width: 3.5rem; /* 56px */
+  background: color-mix(in srgb, var(--kz-surface-1) 85%, transparent);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  border-right: 1px solid var(--kz-border-subtle);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.krizaka-avatar-anchor {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.typewriter-cursor::after {
+  content: "▎";
+  display: inline-block;
+  color: var(--kz-accent);
+  animation: typewriter-blink 0.8s step-end infinite;
+  margin-left: 1px;
+  font-weight: 300;
+}
+
+/* ═══════════════════════════════════════════════════
+   SURFACE CARDS — Glassmorphic Depth
+   Deep obsidian translucent containers with
+   backdrop-filter blur + saturate. Razor-thin
+   gradient edge borders (0.5px visual via pseudo).
+   ═══════════════════════════════════════════════════ */
+
+.glass-panel {
+  background: color-mix(in srgb, var(--kz-surface-1) 82%, transparent);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  border-color: var(--kz-border-subtle);
+}
+
+.glass-card {
+  position: relative;
+  background: color-mix(in srgb, var(--kz-surface-1) 80%, transparent) !important;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid var(--kz-border-subtle) !important;
+  box-shadow:
+    0 1px 3px hsla(0, 0%, 0%, 0.12),
+    inset 0 1px 0 hsla(0, 0%, 100%, 0.02);
+  transition:
+    border-color 200ms ease,
+    box-shadow 300ms ease;
+}
+
+.glass-card:hover {
+  border-color: var(--kz-border-default) !important;
+  box-shadow:
+    0 1px 3px hsla(0, 0%, 0%, 0.12),
+    0 8px 24px hsla(0, 0%, 0%, 0.06),
+    inset 0 1px 0 hsla(0, 0%, 100%, 0.03);
+}
+
+/* Razor-thin gradient edge — 0.5px visual via pseudo-element */
+.glass-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 0.5px;
+  background: linear-gradient(
+    135deg,
+    hsla(0, 0%, 100%, 0.08) 0%,
+    transparent 40%,
+    transparent 60%,
+    hsla(0, 0%, 100%, 0.04) 100%
+  );
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+/* Active card — breathing glow for SIM-DAG telemetry */
+.glass-card-active {
+  animation: breathing-glow 3s ease-in-out infinite;
+  will-change: box-shadow;
+}
+
+/* ═══════════════════════════════════════════════════
+   UTILITY CLASSES — Command HUD Micro-interactions
+   ═══════════════════════════════════════════════════ */
+
+.premium-transition {
+  transition: all 200ms ease;
+}
+
+.hover-lift {
+  transition:
+    transform 200ms ease,
+    box-shadow 200ms ease;
+}
+.hover-lift:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px hsla(0, 0%, 0%, 0.1);
+}
+
+/* Ambient grid background */
+.ambient-grid {
+  background-image:
+    linear-gradient(var(--sovkora-grid-color) 1px, transparent 1px),
+    linear-gradient(90deg, var(--sovkora-grid-color) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+/* Command HUD typography — ultra-sharp tracking */
+.hud-title {
+  font-weight: 700;
+  letter-spacing: -0.035em;
+  line-height: 1.1;
+}
+
+.hud-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--kz-text-muted);
+}
+
+.hud-value {
+  font-family: var(--kz-font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: var(--kz-text-primary);
+}
+
+/* Stagger children animations — restrained */
+.stagger-children > * {
+  animation: fade-up 300ms ease both;
+}
+.stagger-children > *:nth-child(1) {
+  animation-delay: 0ms;
+}
+.stagger-children > *:nth-child(2) {
+  animation-delay: 50ms;
+}
+.stagger-children > *:nth-child(3) {
+  animation-delay: 100ms;
+}
+.stagger-children > *:nth-child(4) {
+  animation-delay: 150ms;
+}
+.stagger-children > *:nth-child(5) {
+  animation-delay: 200ms;
+}
+.stagger-children > *:nth-child(6) {
+  animation-delay: 250ms;
+}
+.stagger-children > *:nth-child(7) {
+  animation-delay: 300ms;
+}
+.stagger-children > *:nth-child(8) {
+  animation-delay: 350ms;
+}
+
+/* ═══════════════════════════════════════════════════
+   COMPONENT — Theme Card (rotating gradient border)
+   ═══════════════════════════════════════════════════ */
+
+/* prettier-ignore */
+@keyframes gradient-rotate {
+  from { --gradient-angle: 0deg; }
+  to   { --gradient-angle: 360deg; }
+}
+
+@keyframes select-pulse {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(0.97);
+  }
+  70% {
+    transform: scale(1.01);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes check-pop {
+  0% {
+    transform: scale(0) rotate(-45deg);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.2) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes status-slide {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.theme-card-active::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--gradient-angle, 0deg),
+    var(--kz-accent),
+    transparent 30%,
+    transparent 70%,
+    var(--kz-accent)
+  );
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+  animation: gradient-rotate 3s linear infinite;
+}
+
+.theme-card-pulse {
+  animation: select-pulse 300ms ease-out;
+}
+
+.theme-check-pop {
+  animation: check-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.theme-status-slide {
+  animation: status-slide 250ms ease-out both;
+}
+
+/* ═══════════════════════════════════════════════════
+   COMPONENT — Input focus accent ring
+   ═══════════════════════════════════════════════════ */
+
+input:focus,
+textarea:focus {
+  box-shadow: var(--sovkora-accent-glow) !important;
+  border-color: var(--kz-accent) !important;
+  outline: none;
+}
+
+/* ═══════════════════════════════════════════════════
+   COMPONENT — Status dot (active/processing)
+   ═══════════════════════════════════════════════════ */
+
+.status-dot {
+  position: relative;
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  background: currentColor;
+}
+.status-dot::before {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  background: currentColor;
+  opacity: 0.3;
+  animation: fade-in 1s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+
+/* ═══════════════════════════════════════════════════
+   COMPONENTS — Skeleton, Toast, Spinner
+   ═══════════════════════════════════════════════════ */
+
+.skeleton {
+  background: linear-gradient(90deg, var(--kz-surface-2) 25%, var(--kz-surface-3) 37%, var(--kz-surface-2) 63%);
+  background-size: 200% 100%;
+  animation: shimmer 1.8s ease-in-out infinite;
+  border-radius: var(--kz-radius-sm);
+}
+
+.skeleton-text {
+  height: 0.875rem;
+  border-radius: 4px;
+}
+
+.skeleton-circle {
+  border-radius: var(--kz-radius-full);
+}
+
+.toast-enter {
+  animation: toast-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.toast-exit {
+  animation: toast-out 200ms ease-in forwards;
+}
+
+.animate-shake {
+  animation: shake 400ms ease-in-out;
+}
+
+.animate-spin-slow {
+  animation: spin 800ms linear infinite;
+}
+
+/* Gradient mesh for login hero background */
+.gradient-mesh {
+  background: linear-gradient(
+    -45deg,
+    var(--kz-surface-1),
+    color-mix(in srgb, var(--kz-accent-soft) 40%, var(--kz-surface-1)),
+    var(--kz-surface-1),
+    color-mix(in srgb, var(--kz-accent-soft) 30%, var(--kz-surface-1))
+  );
+  background-size: 400% 400%;
+  animation: gradient-mesh 12s ease infinite;
+}
+
+/* Fluid text utility classes */
+.fluid-xs {
+  font-size: var(--text-xs);
+}
+.fluid-sm {
+  font-size: var(--text-sm);
+}
+.fluid-base {
+  font-size: var(--text-base);
+}
+.fluid-lg {
+  font-size: var(--text-lg);
+}
+.fluid-xl {
+  font-size: var(--text-xl);
+}
+.fluid-2xl {
+  font-size: var(--text-2xl);
+}
+.fluid-display {
+  font-size: var(--text-display);
+}
+
+/* ═══════════════════════════════════════════════════
+   REDUCED MOTION — the theme's own idle and entrance motion stops
+   ═══════════════════════════════════════════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  .glass-card-active,
+  .stagger-children > *,
+  .gradient-mesh,
+  .skeleton,
+  .typewriter-cursor::after,
+  .theme-card-active::before,
+  .status-dot::before {
+    animation: none;
+  }
+}