@salmexio/ui 0.4.0 → 1.1.0

package/dist/styles/tokens.css

@@ -1,334 +1,407 @@
 /**
- * Salmex I/O UI Design Tokens
- * Win2K reimagined by Jean-Michel Basquiat
- * Raw. Expressive. Powerful. Unfinished.
+ * Salmex I/O Design System — INFRARED
  *
- * Typography: Work Sans (UI), Roboto Mono (code), Space Grotesk (display), Caveat Brush (accent).
- * Load fonts first in your app (e.g. in root layout CSS): @import url('https://fonts.googleapis.com/...') before other imports.
+ * Dark-only. Glassmorphic. Sovereign.
+ * Thermal optics. Forge heat. Earned authority.
+ *
+ * Token architecture: primitives → semantic → component
+ * Prefix: --sx-
+ *
+ * Typography: TT Fors (body), TT Quaris (display), JetBrains Mono (mono).
+ * Fonts must be loaded by the consuming app.
  */
+
 :root {
 	/* ========================================
-	   BASQUIAT × WIN2K COLORS
+	   PRIMITIVE COLORS
+	   Raw palette — never use directly in components
+	   ======================================== */
+
+	--sx-gray-950: #08080C;
+	--sx-gray-900: #0F0F14;
+	--sx-gray-800: #171720;
+	--sx-gray-700: #1F1F2A;
+	--sx-gray-600: #2D2D3A;
+	--sx-gray-500: #505060;
+	--sx-gray-400: #7A7A88;
+	--sx-gray-300: #A0A0AB;
+	--sx-gray-200: #C5C5CC;
+	--sx-gray-100: #E8E6E1;
+	--sx-white: #F0EEE8;
+
+	/* Accents — Vermilion (forge heat) */
+	--sx-vermilion-500: #FF6B35;
+	--sx-vermilion-400: #FF8C5A;
+	--sx-vermilion-600: #E05520;
+
+	/* Accents — Brass (earned authority) */
+	--sx-brass-500: #C8A84E;
+	--sx-brass-400: #D4B86A;
+	--sx-brass-600: #A68B3A;
+
+	/* Accents — Danger */
+	--sx-red-500: #DC2626;
+	--sx-red-400: #EF4444;
+	--sx-red-600: #B91C1C;
+
+	/* Accents — Phosphor (operational green) */
+	--sx-green-500: #4ADE80;
+	--sx-green-400: #6EE7A0;
+	--sx-green-600: #22C55E;
+
+	/* Accents — Teal (encrypted channel) */
+	--sx-teal-500: #3D8B8B;
+	--sx-teal-400: #5AABAB;
+	--sx-teal-600: #2D6B6B;
+
+	/* ========================================
+	   SEMANTIC COLORS
+	   Purpose-driven — use these in components
+	   ======================================== */
+
+	/* Backgrounds */
+	--sx-color-base: var(--sx-gray-950);
+	--sx-color-surface: var(--sx-gray-900);
+	--sx-color-surface-2: var(--sx-gray-800);
+	--sx-color-surface-3: var(--sx-gray-700);
+
+	/* Text */
+	--sx-color-text: var(--sx-gray-100);
+	--sx-color-text-secondary: var(--sx-gray-400);
+	--sx-color-text-disabled: var(--sx-gray-500);
+	--sx-color-text-inverse: var(--sx-gray-950);
+
+	/* Borders */
+	--sx-color-border: rgba(255, 255, 255, 0.06);
+	--sx-color-border-strong: rgba(255, 255, 255, 0.12);
+	--sx-color-border-hover: rgba(255, 255, 255, 0.18);
+
+	/* Accents — semantic aliases */
+	--sx-color-primary: var(--sx-vermilion-500);
+	--sx-color-secondary: var(--sx-brass-500);
+	--sx-color-red: var(--sx-red-500);
+	--sx-color-green: var(--sx-green-500);
+	--sx-color-teal: var(--sx-teal-500);
+
+	/* Backward compat aliases — components referencing old names */
+	--sx-color-cyan: var(--sx-vermilion-500);
+	--sx-color-gold: var(--sx-brass-500);
+	--sx-color-purple: var(--sx-teal-500);
+
+	/* Semantic states */
+	--sx-color-success: var(--sx-green-500);
+	--sx-color-warning: var(--sx-brass-500);
+	--sx-color-error: var(--sx-red-500);
+	--sx-color-info: var(--sx-teal-500);
+
+	/* ========================================
+	   GLASSMORPHISM
+	   ======================================== */
+
+	--sx-glass-bg: rgba(15, 15, 20, 0.6);
+	--sx-glass-bg-strong: rgba(15, 15, 20, 0.85);
+	--sx-glass-border: 1px solid rgba(255, 255, 255, 0.06);
+	--sx-glass-blur: blur(16px);
+
+	/* ========================================
+	   SHADOWS
 	   ======================================== */
 
-	/* Primary Palette - Bold & Vibrant (not safe corporate colors) */
-	--salmex-crown-yellow: 255 220 0; /* Basquiat's crown gold */
-	--salmex-street-yellow: 230 180 0; /* Lighter golden yellow for light mode */
-	--salmex-electric-blue: 0 112 255; /* Vibrant, not muted */
-	--salmex-street-red: 237 28 36; /* Graffiti red */
-	--salmex-midnight-black: 18 18 18; /* Deep black canvas */
-	--salmex-chalk-white: 248 248 240; /* Slightly off-white, like canvas */
-
-	/* Window Chrome - Rougher, Less Perfect */
-	--salmex-window-surface: 230 225 210; /* Aged paper/canvas feel */
-	--salmex-titlebar-bold: 0 90 200; /* Strong blue, less corporate */
-	--salmex-frame-dark: 40 40 40; /* Dark frame, not gray */
-
-	/* Button Face - Textured */
-	--salmex-button-face: 235 230 215; /* Canvas-like surface */
-	--salmex-button-shadow: 80 80 80; /* Stronger shadows */
-	--salmex-button-dark-edge: 30 30 30; /* Bold dark edges */
-	--salmex-button-highlight: 255 255 245; /* Bright highlights */
-	--salmex-button-light: 210 205 190; /* Subtle mid-tone */
-
-	/* Accent Colors - Neo-Expressionist */
-	--salmex-graffiti-pink: 255 105 180; /* Hot pink */
-	--salmex-spray-orange: 255 140 0; /* Bold orange */
-	--salmex-urban-green: 50 205 50; /* Bright green */
-	--salmex-neon-purple: 148 0 211; /* Deep purple */
-
-	/* System Colors - Less Safe */
-	--salmex-selection: 255 220 0; /* Crown yellow, not blue */
-	--salmex-hover-layer: 255 220 0; /* Yellow hover */
+	--sx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+	--sx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+	--sx-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+	--sx-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
+	--sx-shadow-glow-primary: 0 0 20px rgba(255, 107, 53, 0.18);
+	--sx-shadow-glow-primary-strong: 0 0 30px rgba(255, 107, 53, 0.30);
+	--sx-shadow-glow-brass: 0 0 20px rgba(200, 168, 78, 0.15);
+	--sx-shadow-glow-red: 0 0 20px rgba(220, 38, 38, 0.15);
+	--sx-shadow-glow-green: 0 0 20px rgba(74, 222, 128, 0.15);
+	--sx-shadow-glow-teal: 0 0 20px rgba(61, 139, 139, 0.15);
+
+	/* Backward compat aliases */
+	--sx-shadow-glow-cyan: var(--sx-shadow-glow-primary);
+	--sx-shadow-glow-cyan-strong: var(--sx-shadow-glow-primary-strong);
+	--sx-shadow-glow-gold: var(--sx-shadow-glow-brass);
 
 	/* ========================================
-	   MODERN ENHANCEMENTS
+	   INTERACTION OVERLAYS
+	   Translucent accents for hovers, highlights, backdrops
 	   ======================================== */
 
-	/* Primary Brand */
-	--salmex-primary: 0 112 255; /* Electric blue */
-	--salmex-primary-light: 64 150 255;
-	--salmex-primary-dark: 0 80 200;
-
-	/* Semantic Colors */
-	--salmex-success: 50 205 50;
-	--salmex-warning: 255 140 0;
-	--salmex-error: 237 28 36;
-	--salmex-info: 0 112 255;
-
-	/* Text Colors */
-	--salmex-text-primary: 18 18 18;
-	--salmex-text-secondary: 60 60 60;
-	--salmex-text-disabled: 140 140 140;
-	--salmex-text-inverse: 248 248 240;
-
-	/* Background Colors */
-	--salmex-bg-primary: 248 248 240;
-	--salmex-bg-secondary: 235 230 215;
-	--salmex-bg-tertiary: 220 215 200;
-	--salmex-bg-canvas: 255 255 250; /* Raw canvas */
-
-	/* Border Colors - Bolder */
-	--salmex-border-default: 80 80 80;
-	--salmex-border-light: 160 160 160;
-	--salmex-border-dark: 30 30 30;
-	--salmex-border-accent: 255 220 0; /* Yellow accent borders */
+	--sx-color-primary-subtle: rgba(255, 107, 53, 0.06);
+	--sx-color-primary-hover: rgba(255, 107, 53, 0.1);
+	--sx-color-primary-active: rgba(255, 107, 53, 0.15);
+	--sx-color-primary-ring: rgba(255, 107, 53, 0.1);
+	--sx-color-red-subtle: rgba(220, 38, 38, 0.06);
+	--sx-color-red-hover: rgba(220, 38, 38, 0.1);
+	--sx-color-red-ring: rgba(220, 38, 38, 0.1);
+	--sx-color-green-subtle: rgba(74, 222, 128, 0.06);
+	--sx-color-brass-subtle: rgba(200, 168, 78, 0.06);
+	--sx-color-teal-subtle: rgba(61, 139, 139, 0.12);
+	--sx-color-backdrop: rgba(8, 8, 12, 0.7);
+
+	/* Backward compat aliases */
+	--sx-color-cyan-subtle: var(--sx-color-primary-subtle);
+	--sx-color-cyan-hover: var(--sx-color-primary-hover);
+	--sx-color-cyan-active: var(--sx-color-primary-active);
+	--sx-color-cyan-ring: var(--sx-color-primary-ring);
+	--sx-color-gold-subtle: var(--sx-color-brass-subtle);
+	--sx-color-purple-subtle: var(--sx-color-teal-subtle);
 
 	/* ========================================
-	   FOCUS INDICATORS - Yellow, visible in both themes
+	   GRADIENTS
 	   ======================================== */
 
-	/* Light: dark inner edge + yellow ring so yellow pops on light backgrounds */
-	--salmex-focus-outline: none;
-	--salmex-focus-offset: 0;
-	--salmex-focus-style: dashed;
-	--salmex-focus-ring: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 2px 4px
-		rgb(var(--salmex-crown-yellow));
-	/* Thicker dashed outline fallback for outline-only usage */
-	--salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
-	--salmex-focus-outline-width: 3px;
+	--sx-gradient-brand: linear-gradient(135deg, var(--sx-color-primary), var(--sx-color-secondary));
+	--sx-gradient-surface: linear-gradient(180deg, var(--sx-color-surface), var(--sx-color-base));
+	--sx-gradient-primary: linear-gradient(135deg, var(--sx-color-primary), var(--sx-vermilion-600));
+	--sx-gradient-overlay: linear-gradient(180deg, rgba(8, 8, 12, 0) 0%, rgba(8, 8, 12, 0.8) 100%);
+
+	/* Backward compat */
+	--sx-gradient-cyan: var(--sx-gradient-primary);
 
 	/* ========================================
-	   SPACING (Slightly Irregular - 8px base but expressive)
+	   TYPOGRAPHY
 	   ======================================== */
 
-	--salmex-space-1: 4px;
-	--salmex-space-2: 8px;
-	--salmex-space-3: 12px;
-	--salmex-space-4: 16px;
-	--salmex-space-5: 20px;
-	--salmex-space-6: 24px;
-	--salmex-space-8: 32px;
-	--salmex-space-10: 40px;
-	--salmex-space-12: 48px;
+	--sx-font-body: 'TT Fors', system-ui, -apple-system, sans-serif;
+	--sx-font-display: 'TT Quaris', Georgia, 'Times New Roman', serif;
+	--sx-font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
+
+	--sx-text-xs: 0.75rem;
+	--sx-text-sm: 0.875rem;
+	--sx-text-base: 1rem;
+	--sx-text-md: 1.125rem;
+	--sx-text-lg: 1.25rem;
+	--sx-text-xl: 1.5rem;
+	--sx-text-2xl: 2rem;
+	--sx-text-display: 3rem;
+
+	--sx-leading-tight: 1.2;
+	--sx-leading-normal: 1.5;
+	--sx-leading-relaxed: 1.65;
+
+	--sx-tracking-tight: -0.02em;
+	--sx-tracking-normal: 0;
+	--sx-tracking-wide: 0.02em;
+	--sx-tracking-wider: 0.05em;
 
 	/* ========================================
-	   TYPOGRAPHY - Win2K workhorse + Basquiat accents
+	   SPACING
 	   ======================================== */
 
-	/* Core UI / body – dense UI, labels, long sessions (Work Sans) */
-	--salmex-font-system: "Work Sans", "Segoe UI", system-ui, sans-serif;
-	/* Display / sci-system – logos, nav, title bars, large only (Space Grotesk) */
-	--salmex-font-display: "Space Grotesk", "Impact", system-ui, sans-serif;
-	/* Monospace – code, logs, debug panels (Roboto Mono) */
-	--salmex-font-mono: "Roboto Mono", "Consolas", "Courier New", monospace;
-	/* Accent – scribble labels, notes, decorative only (Caveat Brush) */
-	--salmex-font-handwrite: "Caveat Brush", cursive;
-
-	--salmex-font-size-xs: 11px;
-	--salmex-font-size-sm: 13px;
-	--salmex-font-size-base: 14px;
-	--salmex-font-size-md: 15px;
-	--salmex-font-size-lg: 18px;
-	--salmex-font-size-xl: 24px;
-	--salmex-font-size-display: 32px;
+	--sx-space-0: 0;
+	--sx-space-px: 1px;
+	--sx-space-0-5: 0.125rem;
+	--sx-space-1: 0.25rem;
+	--sx-space-1-5: 0.375rem;
+	--sx-space-2: 0.5rem;
+	--sx-space-2-5: 0.625rem;
+	--sx-space-3: 0.75rem;
+	--sx-space-4: 1rem;
+	--sx-space-5: 1.25rem;
+	--sx-space-6: 1.5rem;
+	--sx-space-8: 2rem;
+	--sx-space-10: 2.5rem;
+	--sx-space-12: 3rem;
+	--sx-space-16: 4rem;
+	--sx-space-20: 5rem;
+	--sx-space-24: 6rem;
 
 	/* ========================================
-	   SHADOWS - Stronger, More Dramatic
+	   BORDER RADIUS
 	   ======================================== */
 
-	--salmex-shadow-sm: 2px 2px 1px rgb(var(--salmex-button-shadow));
-	--salmex-shadow-md: 3px 3px 2px rgb(0 0 0 / 0.25);
-	--salmex-shadow-lg: 4px 4px 3px rgb(0 0 0 / 0.3);
-	--salmex-shadow-inset: inset 2px 2px 3px rgb(0 0 0 / 0.15);
+	--sx-radius-none: 0;
+	--sx-radius-sm: 6px;
+	--sx-radius-md: 10px;
+	--sx-radius-lg: 16px;
+	--sx-radius-xl: 24px;
+	--sx-radius-full: 9999px;
 
 	/* ========================================
-	   BORDER RADIUS - Minimal but Slightly Imperfect
+	   MOTION — Durations
 	   ======================================== */
 
-	--salmex-radius-none: 0;
-	--salmex-radius-sm: 4px;
-	--salmex-radius-md: 6px;
-	--salmex-radius-lg: 10px;
-	--salmex-radius-xl: 14px;
-	--salmex-radius-rough: 0; /* Sharp edges, Basquiat style */
+	--sx-duration-instant: 100ms;
+	--sx-duration-fast: 150ms;
+	--sx-duration-base: 250ms;
+	--sx-duration-slow: 400ms;
+	--sx-duration-slower: 600ms;
 
 	/* ========================================
-	   BORDER WIDTHS
+	   MOTION — Easing curves
 	   ======================================== */
 
-	--salmex-border-width-sm: 1px; /* inputs, badges, separators */
-	--salmex-border-width-md: 2px; /* buttons, cards, panels */
-	--salmex-border-width-lg: 3px; /* windows only */
+	--sx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+	--sx-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+	--sx-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
+	--sx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
 	/* ========================================
-	   TRANSITIONS - Snappier, More Energetic
+	   MOTION — Transition shorthands
 	   ======================================== */
 
-	--salmex-transition-fast: 100ms ease-out;
-	--salmex-transition-base: 150ms ease-out;
-	--salmex-transition-slow: 200ms ease-out;
+	--sx-transition-fast: 150ms ease;
+	--sx-transition-base: 250ms ease;
+	--sx-transition-slow: 400ms ease;
 
 	/* ========================================
 	   Z-INDEX LAYERS
 	   ======================================== */
 
-	--salmex-z-dropdown: 1000;
-	--salmex-z-sticky: 1020;
-	--salmex-z-fixed: 1030;
-	--salmex-z-modal-backdrop: 1040;
-	--salmex-z-modal: 1050;
-	--salmex-z-popover: 1060;
-	--salmex-z-tooltip: 1070;
+	--sx-z-base: 1;
+	--sx-z-dropdown: 1000;
+	--sx-z-sticky: 1020;
+	--sx-z-fixed: 1030;
+	--sx-z-modal-backdrop: 1040;
+	--sx-z-modal: 1050;
+	--sx-z-popover: 1060;
+	--sx-z-tooltip: 1070;
+	--sx-z-grain: 2000;
 
 	/* ========================================
-	   BASQUIAT SIGNATURE ELEMENTS
+	   ICON SIZES
+	   Standardised sizes for Lucide (or any) icons
 	   ======================================== */
 
-	--salmex-crown-symbol: "👑"; /* Basquiat's crown */
-	--salmex-annotation-style: "handwrite";
-	--salmex-texture-noise: 0.02; /* Slight texture/grain */
+	--sx-icon-xs: 14px;
+	--sx-icon-sm: 16px;
+	--sx-icon-md: 18px;
+	--sx-icon-lg: 20px;
+	--sx-icon-xl: 24px;
+	--sx-icon-stroke: 1.75;
 }
 
 /* ========================================
-   DARK MODE (Street Art Night Mode)
+   GLOBAL RESETS
    ======================================== */
 
-[data-theme="dark"] {
-	/* Neon on black - high contrast street art */
-	--salmex-midnight-black: 10 10 10;
-	--salmex-chalk-white: 255 255 255;
-
-	/* Window chrome - darker canvas */
-	--salmex-window-surface: 22 22 22;
-	--salmex-titlebar-bold: 0 140 255; /* Brighter blue for dark mode */
-	--salmex-button-face: 32 32 32;
-	--salmex-button-shadow: 50 50 50;
-	--salmex-button-dark-edge: 8 8 8;
-	--salmex-button-highlight: 90 90 90;
-	--salmex-button-light: 50 50 50;
-
-	/* Text - high contrast */
-	--salmex-text-primary: 255 255 255;
-	--salmex-text-secondary: 200 200 200;
-	--salmex-text-disabled: 100 100 100;
-
-	/* Backgrounds - darker canvas */
-	--salmex-bg-primary: 15 15 15;
-	--salmex-bg-secondary: 22 22 22;
-	--salmex-bg-tertiary: 32 32 32;
-	--salmex-bg-canvas: 18 18 18;
-
-	/* Borders - more visible */
-	--salmex-border-default: 80 80 80;
-	--salmex-border-light: 60 60 60;
-	--salmex-border-dark: 120 120 120;
-
-	/* Neon colors pop more in dark mode */
-	--salmex-crown-yellow: 255 240 0; /* Brighter yellow */
-	--salmex-electric-blue: 64 150 255; /* Lighter blue */
-	--salmex-street-red: 255 50 50; /* Brighter red */
-	--salmex-graffiti-pink: 255 120 200;
-	--salmex-spray-orange: 255 160 40;
-	--salmex-urban-green: 80 230 80;
-	--salmex-neon-purple: 180 40 255;
-
-	/* Primary colors adjusted */
-	--salmex-primary: 64 150 255;
-	--salmex-primary-light: 100 180 255;
-	--salmex-primary-dark: 40 120 220;
-
-	/* Selection/hover - neon yellow */
-	--salmex-selection: 255 240 0;
-	--salmex-hover-layer: 255 240 0;
-
-	/* Focus - bright yellow ring (no dark edge needed on dark bg) */
-	--salmex-focus-outline: 2px dashed rgb(var(--salmex-crown-yellow));
-	--salmex-focus-ring: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
-	--salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
-	--salmex-focus-outline-width: 3px;
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]) {
-		/* Same as [data-theme='dark'] */
-		--salmex-midnight-black: 10 10 10;
-		--salmex-chalk-white: 255 255 255;
-		--salmex-window-surface: 22 22 22;
-		--salmex-titlebar-bold: 0 140 255;
-		--salmex-button-face: 32 32 32;
-		--salmex-button-shadow: 50 50 50;
-		--salmex-button-dark-edge: 8 8 8;
-		--salmex-button-highlight: 90 90 90;
-		--salmex-button-light: 50 50 50;
-		--salmex-text-primary: 255 255 255;
-		--salmex-text-secondary: 200 200 200;
-		--salmex-text-disabled: 100 100 100;
-		--salmex-bg-primary: 15 15 15;
-		--salmex-bg-secondary: 22 22 22;
-		--salmex-bg-tertiary: 32 32 32;
-		--salmex-bg-canvas: 18 18 18;
-		--salmex-border-default: 80 80 80;
-		--salmex-border-light: 60 60 60;
-		--salmex-border-dark: 120 120 120;
-		--salmex-crown-yellow: 255 240 0;
-		--salmex-electric-blue: 64 150 255;
-		--salmex-street-red: 255 50 50;
-		--salmex-primary: 64 150 255;
-		--salmex-primary-light: 100 180 255;
-		--salmex-selection: 255 240 0;
-	}
+/* ========================================
+   FOCUS STATES — Vermilion outline, visible on dark
+   ======================================== */
+
+:focus {
+	outline: none;
+}
+
+:focus-visible {
+	outline: 2px solid var(--sx-color-primary);
+	outline-offset: 2px;
 }
 
 /* ========================================
-   GLOBAL RESETS & BASQUIAT TEXTURE
+   LUCIDE ICON DEFAULTS
+   Refined stroke weight for dark UI; Safari vector-effect fix
    ======================================== */
 
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
+.lucide {
+	width: var(--sx-icon-md);
+	height: var(--sx-icon-md);
+	stroke-width: var(--sx-icon-stroke);
 }
 
-/* Add subtle canvas texture to body */
+/* ========================================
+   AMBIENT BACKGROUND — Thermal signature
+   Barely-visible heat dissipation drifts slowly,
+   giving the base surface infrared life.
+   ======================================== */
+
 body {
-	position: relative;
+	background-color: var(--sx-color-base);
+	background-image:
+		radial-gradient(ellipse at 15% 50%, rgba(255, 107, 53, 0.02) 0%, transparent 50%),
+		radial-gradient(ellipse at 85% 20%, rgba(200, 168, 78, 0.015) 0%, transparent 50%),
+		radial-gradient(ellipse at 50% 85%, rgba(61, 139, 139, 0.015) 0%, transparent 50%);
+	background-size: 200% 200%;
+	animation: sx-ambient-drift 25s ease-in-out infinite;
 }
 
-body::before {
-	content: "";
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	opacity: 0.015;
-	background-image: repeating-linear-gradient(
-		0deg,
-		transparent,
-		transparent 2px,
-		rgb(0 0 0 / 0.02) 2px,
-		rgb(0 0 0 / 0.02) 4px
-	);
-	z-index: -1;
+/* ========================================
+   SELECTION
+   ======================================== */
+
+::selection {
+	background: rgba(255, 107, 53, 0.25);
+	color: var(--sx-color-text);
 }
 
-/* Remove default focus styles - we'll add our own */
-:focus {
-	outline: none;
+/* ========================================
+   @property — GPU-accelerated gradient angles
+   Required for conic-gradient rotation animations.
+   Falls back gracefully: browsers without @property
+   see a static gradient (no rotation), which is fine.
+   ======================================== */
+
+@property --sx-border-angle {
+	syntax: "<angle>";
+	initial-value: 0deg;
+	inherits: false;
 }
 
-/* Basquiat-style focus - single yellow ring; transition only (no keyframes = no double shadow) */
-:focus-visible {
-	outline: none;
-	box-shadow: var(--salmex-focus-ring);
-	transition: box-shadow var(--salmex-transition-fast);
+/* ========================================
+   GLOBAL KEYFRAMES
+   Shared animations used by multiple components.
+   Component-specific keyframes live in the component.
+   ======================================== */
+
+@keyframes sx-border-flow {
+	to {
+		--sx-border-angle: 360deg;
+	}
+}
+
+@keyframes sx-ambient-drift {
+	0%   { background-position: 0% 50%; }
+	50%  { background-position: 100% 50%; }
+	100% { background-position: 0% 50%; }
+}
+
+@keyframes sx-focus-breathe {
+	0%, 100% { box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12); }
+	50%      { box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.28); }
+}
+
+@keyframes sx-error-shake {
+	0%, 100% { transform: translateX(0); }
+	15%      { transform: translateX(-4px); }
+	30%      { transform: translateX(4px); }
+	45%      { transform: translateX(-3px); }
+	60%      { transform: translateX(2px); }
+	75%      { transform: translateX(-1px); }
 }
 
-/* Light theme: dark edge + yellow in one clean ring */
-:root:not([data-theme="dark"]) :focus-visible {
-	box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 2px 4px rgb(var(--salmex-crown-yellow));
+@keyframes sx-check-in {
+	from {
+		transform: scale(0.5);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
 }
 
-/* Dark theme: yellow only with blur */
-[data-theme="dark"] :focus-visible {
-	box-shadow: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
+@keyframes sx-badge-pop {
+	0%   { transform: scale(1); }
+	40%  { transform: scale(1.15); }
+	100% { transform: scale(1); }
 }
 
-@media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]) :focus-visible {
-		box-shadow: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
+@keyframes sx-alert-in {
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
 	}
 }
 
@@ -345,8 +418,4 @@ body::before {
 		transition-duration: 0.01ms !important;
 		scroll-behavior: auto !important;
 	}
-
-	:focus-visible {
-		transition: none;
-	}
 }