/* @hiai-gg/hiai-ui — Theme: Webs (Laser Grid palette)
 *
 * Source: extracted from
 *   - projects/webs/apps/hiai/src/routes/layout.css (canonical surface tokens)
 *   - projects/webs/apps/hiai/src/routes/+layout.svelte (typography, animations)
 *
 * Activation:
 *   - Light: add class "theme-webs" to <html>
 *   - Dark:  add class "theme-webs dark" to <html>
 *   - "theme-webs" stacks alongside the existing ".dark" toggle without replacing it.
 *   - ThemeSwitcher.svelte adds/removes the class on the html element.
 *
 * Tokens mirror the names declared in styles/tokens.css so every component that
 * reads --background / --primary / --ring / --card / --border / --font-heading /
 * --font-body re-skins automatically — same DOM, same components, only the
 * palette swaps.
 */

.theme-webs {
	color-scheme: light;

	--background: #ffffff;
	--foreground: #0000b3;
	--card: #ffffff;
	--card-foreground: #0000b3;
	--popover: #ffffff;
	--popover-foreground: #0000b3;

	--primary: #cc007a;
	--primary-foreground: #ffffff;
	--primary-hover: #b3006b;

	--secondary: #f0f0f0;
	--secondary-foreground: #0000b3;

	--muted: #f0f0f0;
	--muted-foreground: #006600;

	--accent: #999900;
	--accent-foreground: #ffffff;

	--destructive: #cc007a;
	--destructive-foreground: #ffffff;

	--border: #e0e0e0;
	--input: #e0e0e0;
	--ring: #ff0099;
	--radius: 0.5rem;

	--color-primary: #cc007a;
	--color-secondary: #f0f0f0;
	--color-bg: #ffffff;
	--color-surface: #f0f0f0;

	/* Laser Grid typography stack */
	--font-heading: 'Righteous', 'Zen Dots', sans-serif;
	--font-body: 'Inter', sans-serif;

	/* Extended surface tokens from webs/hiai */
	--surface-50: #FFFFFF;
	--surface-100: #F0F0F0;
	--surface-200: #E0E0E0;
	--surface-300: #D4D4D4;
	--surface-400: #A3A3A3;
	--surface-700: #262626;
	--surface-800: #18181B;
	--surface-900: #09090B;
	--surface-950: #050506;

	/* Extended primary scale */
	--primary-400: #FF33AD;
	--primary-500: #FF0099;
	--primary-600: #CC007A;

	/* Extended text colors */
	--laser-text-light: #0000FF;
	--laser-textsec-light: #00FF00;
	--laser-text-dark: #FAFAFA;
	--laser-textsec-dark: #A1A1AA;

	/* Accent */
	--accent-color: #FFFF00;
}

.theme-webs.dark {
	color-scheme: dark;

	--background: #000000;
	--foreground: #ffffff;
	--card: #1a1a1a;
	--card-foreground: #ffffff;
	--popover: #1a1a1a;
	--popover-foreground: #ffffff;

	--primary: #ff0099;
	--primary-foreground: #000000;
	--primary-hover: #ff33ad;

	--secondary: #1a1a1a;
	--secondary-foreground: #ffffff;

	--muted: #1a1a1a;
	--muted-foreground: #00ff00;

	--accent: #ffff00;
	--accent-foreground: #000000;

	--destructive: #ff0099;
	--destructive-foreground: #000000;

	--border: #333333;
	--input: #333333;
	--ring: #ff0099;

	--color-primary: #ff0099;
	--color-secondary: #1a1a1a;
	--color-bg: #000000;
	--color-surface: #1a1a1a;

	/* Laser Grid typography stack (same in dark) */
	--font-heading: 'Righteous', 'Zen Dots', sans-serif;
	--font-body: 'Inter', sans-serif;

	/* Extended surface tokens (dark) */
	--surface-50: #050506;
	--surface-100: #09090B;
	--surface-200: #18181B;
	--surface-300: #262626;
	--surface-400: #A3A3A3;
	--surface-700: #D4D4D4;
	--surface-800: #E0E0E0;
	--surface-900: #F0F0F0;
	--surface-950: #FFFFFF;

	/* Extended primary scale (dark) */
	--primary-400: #FF33AD;
	--primary-500: #FF0099;
	--primary-600: #CC007A;

	/* Extended text colors (dark) */
	--laser-text-light: #FAFAFA;
	--laser-textsec-light: #A1A1AA;
	--laser-text-dark: #0000FF;
	--laser-textsec-dark: #00FF00;

	/* Accent */
	--accent-color: #FFFF00;
}

/* ============================================
   Webs theme animations (from webs/hiai layout.css)
   ============================================ */
@keyframes rise-in {
	from {
		opacity: 0;
		translate: 0 18px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes soft-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -6px; }
}

@keyframes line-pulse {
	0%, 100% {
		opacity: 0.42;
		stroke-dashoffset: 0;
	}
	50% {
		opacity: 0.95;
		stroke-dashoffset: -10;
	}
}

.animate-rise-in {
	animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-float-soft {
	animation: soft-float 5.5s ease-in-out infinite;
}

.animate-line-pulse {
	stroke-dasharray: 6 8;
	animation: line-pulse 4.8s ease-in-out infinite;
}

/* Integrated mode overrides */
:where(.is-integrated, .no-header) header {
	display: none !important;
}
:where(.is-integrated, .no-header) main {
	padding-top: 0 !important;
}

/* Ecosystem noir theme */
:where(.webs-noir) {
	background-color: #030712 !important;
	color: #f8fafc !important;
}
:where(.webs-noir) [class*="bg-surface-"] {
	background-color: #030712 !important;
}
:where(.webs-noir) section {
	background-color: #030712 !important;
}
:where(.webs-noir) header {
	display: none !important;
}