/* Copyright (c) 2026 Alex Sheridan. All rights reserved. */
/* Proprietary and confidential. See LICENSE for terms. */
/*  ASH Design Bible — Unified Token System
 *  Single source of truth for all ASH fleet surfaces.
 *  Import this file: @import url('tokens.css');
 */

/* ═══════════════════════════════════════════════════════════
   CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════ */
:root {
	/* ── Surface depths ── */
	--ash-surface-0: #030306;
	--ash-surface-1: #0a0a0f;
	--ash-surface-2: #0d0d14;
	--ash-surface-3: #14141f;
	--ash-surface-4: #1a1a2e;

	/* ── Glass system ── */
	--ash-glass: rgba(10, 10, 20, 0.55);
	--ash-glass-border: rgba(0, 240, 255, 0.08);
	--ash-glass-highlight: rgba(255, 255, 255, 0.03);
	--ash-glass-frost: blur(20px) saturate(1.4);

	/* ── Signal palette — 14 colors × 3 brightness levels ──
   *  Glow:  full neon. Active indicators, focused elements, text/box-shadow.
   *  Matte: working color. Borders, labels, chart lines, pills. Readable, not blinding.
   *  Dim:   whisper. Inactive borders, background tints, disabled states, subtle accents.
   *
   *  The bare token (e.g. --ash-cyan) is an alias for glow — backward compatible.
   */

	/* Cyan — core intelligence, primary signal */
	--ash-cyan: #00f0ff;
	--ash-cyan-matte: #0a8f9e;
	--ash-cyan-dim: #0d4f58;

	/* Teal — engineering support, tooling */
	--ash-teal: #00d4aa;
	--ash-teal-matte: #0a8a72;
	--ash-teal-dim: #064d40;

	/* Green — success, healthy, build */
	--ash-green: #39ff14;
	--ash-green-matte: #2da44e;
	--ash-green-dim: #16532a;

	/* Emerald — engineering, creation */
	--ash-emerald: #00e676;
	--ash-emerald-matte: #0d9058;
	--ash-emerald-dim: #065535;

	/* Amber — warning, annotation, monitoring */
	--ash-amber: #ffb627;
	--ash-amber-matte: #b8860b;
	--ash-amber-dim: #5c4306;

	/* Gold — infrastructure, stability */
	--ash-gold: #ffd700;
	--ash-gold-matte: #a89000;
	--ash-gold-dim: #544800;

	/* Red — error, critical, offline */
	--ash-red: #ff4444;
	--ash-red-matte: #b83232;
	--ash-red-dim: #5c1a1a;

	/* Crimson — governance, hard limits */
	--ash-crimson: #dc2626;
	--ash-crimson-matte: #991b1b;
	--ash-crimson-dim: #4c0e0e;

	/* Magenta — urgent alerts, pipeline issues */
	--ash-magenta: #ff2d6a;
	--ash-magenta-matte: #b82050;
	--ash-magenta-dim: #5c1028;

	/* Rose — aesthetic, presentation */
	--ash-rose: #f472b6;
	--ash-rose-matte: #a8507e;
	--ash-rose-dim: #542a40;

	/* Violet — autonomy, cognition, mind */
	--ash-violet: #8957e5;
	--ash-violet-matte: #6940a8;
	--ash-violet-dim: #38235c;

	/* Indigo — deep cognition, background intelligence */
	--ash-indigo: #6366f1;
	--ash-indigo-matte: #4b4db5;
	--ash-indigo-dim: #2a2b62;

	/* Blue — data, information, knowledge */
	--ash-blue: #388bfd;
	--ash-blue-matte: #2a68b8;
	--ash-blue-dim: #183a65;

	/* Slate — neutral infrastructure, passive systems */
	--ash-slate: #94a3b8;
	--ash-slate-matte: #64748b;
	--ash-slate-dim: #334155;

	/* ── Semantic aliases (backward compatible) ── */
	--ash-signal: var(--ash-cyan);
	--ash-alert: var(--ash-magenta);
	--ash-success: var(--ash-green);
	--ash-warning: var(--ash-amber);
	--ash-error: var(--ash-red);
	--ash-data: var(--ash-blue);
	--ash-accent: var(--ash-violet);

	/* ── Fleet accent registry ──
   *  One token per service. Glow = first-class, matte = sibling/sub,
   *  dim = internal sub. See docs/done/ash-design-bible.md § Fleet Accent Registry.
   */

	/* I. Core Identity — Cyan */
	--ash-fleet-ash: var(--ash-cyan);

	/* II. Autonomy — Purple spectrum (Violet + Indigo + Gold-bronze + Deep violet) */
	--ash-fleet-nexus: var(--ash-violet);
	--ash-fleet-crucible: var(--ash-violet-matte);
	--ash-fleet-sentry: var(--ash-indigo-matte);
	--ash-fleet-caliban: var(--ash-indigo-dim);
	--ash-fleet-praetor: #d4a017;
	--ash-fleet-argus: #7a52c7;

	/* III. Engineering — Emerald */
	--ash-fleet-forge: var(--ash-emerald);

	/* IV. Monitoring — Warm spectrum (Amber + Gold) */
	--ash-fleet-watchtower: var(--ash-amber);
	--ash-fleet-lazarus: var(--ash-gold);

	/* V. UX & Perception — Rose */
	--ash-fleet-muse: var(--ash-rose);
	--ash-fleet-erato: var(--ash-rose-matte);
	--ash-fleet-thalia: var(--ash-rose-dim);
	--ash-fleet-mockingbird: var(--ash-rose-dim);

	/* VI. Knowledge — Blue (interface + data layers) */
	--ash-fleet-cortex: var(--ash-blue);
	--ash-fleet-atlas: var(--ash-blue-matte);
	--ash-fleet-folio: var(--ash-blue-dim);
	--ash-fleet-mnemos: #5b9ef5;
	--ash-fleet-siphon: #1d4f8a;
	--ash-fleet-oracle: #a0d2ff;
	--ash-fleet-archimedes: #6cb6d4;

	/* VI-b. Epistemic Immune System — Burnt orange */
	--ash-fleet-cassandra: #e85d3a;

	/* VI-c. Epistemic Analysis — Teal-cyan */
	--ash-fleet-sextant: #4ecdc4;

	/* VI-d. Diagnostic synthesis — sage green (GALEN) */
	--ash-fleet-galen: #5fcf9e;

	/* VII. Issue Tracking — Magenta */
	--ash-fleet-redline: var(--ash-magenta);

	/* VIII. Data & Visualization — Indigo */
	--ash-fleet-prism: var(--ash-indigo);
	--ash-fleet-alembic: var(--ash-indigo-matte);

	/* IX. Artifact Management — Teal */
	--ash-fleet-curator: var(--ash-teal);
	--ash-fleet-vault: var(--ash-teal-matte);

	/* X. Safety & Destruction — Crimson */
	--ash-fleet-thermite: var(--ash-crimson);
	--ash-fleet-sentinel: var(--ash-crimson-matte);

	/* XII. Biometric — Teal-green */
	--ash-fleet-pulse: #2dd4a8;

	/* XIII. Temporal Cognition — Horizon-line cyan-teal (distinct from Knowledge blue and Engineering teal) */
	--ash-fleet-horizon: #3aa6b3; /* matte — temporal substrate / data layer at depth */
	--ash-fleet-meridian: #5cdde8; /* glow  — live UI surface across the substrate */

	/* XI. Notifications — Amber (urgency-adaptive) */
	--ash-fleet-herald: var(--ash-amber);
	--ash-fleet-herald-info: var(--ash-amber-dim);
	--ash-fleet-herald-warn: var(--ash-amber-matte);
	--ash-fleet-herald-alert: var(--ash-amber);
	--ash-fleet-herald-crit: var(--ash-red);
	--ash-fleet-herald-emerg: var(--ash-magenta);

	/* ── Text hierarchy ── */
	--ash-text: #b8b8d0;
	--ash-text-bright: #e8e8f8;
	--ash-text-dim: #6a6a8a; /* WCAG AA ~4.7:1 against surface-0 */
	--ash-text-muted: #7a7a9a; /* WCAG AA ~5.2:1 against surface-0 */

	/* ── Borders ──
     Solid borders are matte-tier per IRON SIGHT §Three Brightness Tiers.
     Glass borders (--ash-border, --ash-border-bright) keep their cyan-tinted
     alpha values for backdrop-filter panels; solid borders (TUI / no-blur)
     resolve to slate matte / dim so the brightness hierarchy survives in
     256-color terminals. */
	--ash-border: rgba(0, 240, 255, 0.06);
	--ash-border-bright: rgba(0, 240, 255, 0.15);
	--ash-border-solid: #64748b; /* SLATE_MATTE — was #1a1a2e (== SURFACE_4) */
	--ash-border-matte: #64748b; /* SLATE_MATTE — working chrome */
	--ash-border-dim: #334155; /* SLATE_DIM — whisper chrome */

	/* ── Glow effects (for glow-tier colors) ── */
	--ash-glow-cyan: 0 0 20px rgba(0, 240, 255, 0.25), 0 0 60px rgba(0, 240, 255, 0.08);
	--ash-glow-teal: 0 0 20px rgba(0, 212, 170, 0.25), 0 0 60px rgba(0, 212, 170, 0.08);
	--ash-glow-green: 0 0 20px rgba(57, 255, 20, 0.25), 0 0 60px rgba(57, 255, 20, 0.08);
	--ash-glow-emerald: 0 0 20px rgba(0, 230, 118, 0.25), 0 0 60px rgba(0, 230, 118, 0.08);
	--ash-glow-amber: 0 0 20px rgba(255, 182, 39, 0.25), 0 0 60px rgba(255, 182, 39, 0.08);
	--ash-glow-gold: 0 0 20px rgba(255, 215, 0, 0.25), 0 0 60px rgba(255, 215, 0, 0.08);
	--ash-glow-red: 0 0 20px rgba(255, 68, 68, 0.25), 0 0 60px rgba(255, 68, 68, 0.08);
	--ash-glow-crimson: 0 0 20px rgba(220, 38, 38, 0.25), 0 0 60px rgba(220, 38, 38, 0.08);
	--ash-glow-magenta: 0 0 20px rgba(255, 45, 106, 0.25), 0 0 60px rgba(255, 45, 106, 0.08);
	--ash-glow-rose: 0 0 20px rgba(244, 114, 182, 0.25), 0 0 60px rgba(244, 114, 182, 0.08);
	--ash-glow-violet: 0 0 20px rgba(137, 87, 229, 0.25), 0 0 60px rgba(137, 87, 229, 0.08);
	--ash-glow-indigo: 0 0 20px rgba(99, 102, 241, 0.25), 0 0 60px rgba(99, 102, 241, 0.08);
	--ash-glow-blue: 0 0 20px rgba(56, 139, 253, 0.25), 0 0 60px rgba(56, 139, 253, 0.08);
	--ash-glow-slate: 0 0 20px rgba(148, 163, 184, 0.15), 0 0 60px rgba(148, 163, 184, 0.05);
	--ash-glow-subtle: 0 0 6px rgba(0, 240, 255, 0.08);

	/* ── Holographic gradients ── */
	--ash-holo-gradient: linear-gradient(
		135deg,
		rgba(0, 240, 255, 0.12) 0%,
		rgba(137, 87, 229, 0.08) 25%,
		rgba(255, 45, 106, 0.06) 50%,
		rgba(0, 240, 255, 0.1) 75%,
		rgba(57, 255, 20, 0.06) 100%
	);
	--ash-holo-shimmer: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.04) 45%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0.04) 55%,
		transparent 100%
	);
	--ash-chrome-edge: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 240, 255, 0.08) 20%,
		rgba(0, 240, 255, 0.15) 50%,
		rgba(0, 240, 255, 0.08) 80%,
		transparent 100%
	);

	/* ── Typography ── */
	--ash-font-mono: "Share Tech Mono", "Fira Code", monospace;
	--ash-font-ui: "Rajdhani", "Segoe UI", sans-serif;
	--ash-font-display: "Orbitron", "Rajdhani", sans-serif;

	/* ── Animation timing ── */
	--ash-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ash-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ash-dur-micro: 100ms;
	--ash-dur-short: 200ms;
	--ash-dur-medium: 400ms;
	--ash-dur-drift: 1000ms;
	--ash-dur-pulse: 3s;

	/* ── Spacing (4px base) ── */
	--ash-sp-1: 4px;
	--ash-sp-2: 8px;
	--ash-sp-3: 12px;
	--ash-sp-4: 16px;
	--ash-sp-6: 24px;
	--ash-sp-8: 32px;
	--ash-sp-10: 40px;
	--ash-sp-12: 48px;
	--ash-sp-16: 64px;

	/* ── Spacing — semantic aliases (preferred for new code) ──
   *  Maps to the 4px-base scale above. Use these in component CSS so
   *  intent is legible: padding: var(--ash-space-md) is "sane gutter",
   *  not "16px because we said so". --ash-sp-N stays for cases where a
   *  precise step-on-the-grid value is needed (e.g. icon strips). */
	--ash-space-xs: var(--ash-sp-1); /* 4px  — micro gap, icon padding */
	--ash-space-sm: var(--ash-sp-2); /* 8px  — between siblings */
	--ash-space-md: var(--ash-sp-4); /* 16px — inside a card */
	--ash-space-lg: var(--ash-sp-6); /* 24px — between cards */
	--ash-space-xl: var(--ash-sp-8); /* 32px — section gutter */
	--ash-space-2xl: var(--ash-sp-12); /* 48px — between major regions */
	--ash-space-3xl: var(--ash-sp-16); /* 64px — page hero rhythm */
}

/* ═══════════════════════════════════════════════════════════
   SHARED KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

@keyframes ash-holo-sweep {
	0% {
		transform: translateX(-25%);
	}
	100% {
		transform: translateX(25%);
	}
}

@keyframes ash-status-pulse {
	0%,
	100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
		box-shadow: 0 0 6px currentColor;
	}
}

@keyframes ash-ring-out {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}
	100% {
		transform: scale(2.5);
		opacity: 0;
	}
}

@keyframes ash-core-pulse {
	0%,
	100% {
		opacity: 0.7;
		transform: scale(0.9);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

@keyframes ash-scan-bar {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(33.3%);
	}
}

@keyframes ash-alert-breathe {
	0%,
	100% {
		box-shadow:
			0 0 12px rgba(255, 45, 106, 0.1),
			inset 0 0 30px rgba(255, 45, 106, 0.02);
	}
	50% {
		box-shadow:
			0 0 30px rgba(255, 45, 106, 0.2),
			inset 0 0 40px rgba(255, 45, 106, 0.04);
	}
}

@keyframes ash-gradient-shift {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 200% 0%;
	}
}

@keyframes ash-holo-text {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 200% 0%;
	}
}

@keyframes ash-float-down {
	0%,
	100% {
		opacity: 0.3;
		transform: translateY(0);
	}
	50% {
		opacity: 0.7;
		transform: translateY(8px);
	}
}

@keyframes ash-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ═══════════════════════════════════════════════════════════
   GLASS PANEL
   ═══════════════════════════════════════════════════════════ */

.glass-panel {
	background: var(--ash-glass);
	backdrop-filter: var(--ash-glass-frost);
	-webkit-backdrop-filter: var(--ash-glass-frost);
	border: 1px solid var(--ash-glass-border);
	border-radius: 6px;
	position: relative;
	overflow: hidden;
}

.glass-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ash-holo-gradient);
	opacity: 0.4;
	pointer-events: none;
}

.glass-panel::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 200%;
	height: 100%;
	background: var(--ash-holo-shimmer);
	animation: ash-holo-sweep 8s linear infinite;
	pointer-events: none;
	opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   HUD CORNER BRACKETS
   ═══════════════════════════════════════════════════════════ */

.hud-bracket {
	position: relative;
}

.hud-bracket::before,
.hud-bracket::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	pointer-events: none;
	z-index: 5;
}

.hud-bracket::before {
	top: -1px;
	left: -1px;
	border-top: 1px solid rgba(0, 240, 255, 0.3);
	border-left: 1px solid rgba(0, 240, 255, 0.3);
}

.hud-bracket::after {
	bottom: -1px;
	right: -1px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.3);
	border-right: 1px solid rgba(0, 240, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   PANEL CHROME BAR
   ═══════════════════════════════════════════════════════════ */

.ash-panel-chrome {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-bottom: 1px solid var(--ash-glass-border);
	font-family: var(--ash-font-mono);
	font-size: 10px;
	position: relative;
	z-index: 2;
}

.ash-chrome-bar {
	width: 32px;
	height: 3px;
	border-radius: 2px;
	flex-shrink: 0;
	box-shadow: 0 0 8px currentColor;
	opacity: 0.8;
}

.ash-chrome-codename {
	color: var(--ash-text-dim);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 9px;
}

.ash-chrome-title {
	color: var(--ash-text-muted);
}

.ash-chrome-sep {
	color: var(--ash-text-dim);
}

.ash-chrome-status {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--ash-text-dim);
	font-size: 9px;
}

.ash-panel-body {
	padding: 14px;
	position: relative;
	z-index: 2;
}

/* ═══════════════════════════════════════════════════════════
   STATUS DOTS
   ═══════════════════════════════════════════════════════════ */

.ash-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
	animation: ash-status-pulse var(--ash-dur-pulse) ease-in-out infinite;
}

.ash-status-dot.online {
	background: var(--ash-green);
	box-shadow: 0 0 6px rgba(57, 255, 20, 0.5);
}
.ash-status-dot.warn {
	background: var(--ash-amber);
	box-shadow: 0 0 6px rgba(255, 182, 39, 0.5);
}
.ash-status-dot.error {
	background: var(--ash-red);
	box-shadow: 0 0 6px rgba(255, 68, 68, 0.5);
}
.ash-status-dot.idle {
	background: var(--ash-text-dim);
	animation: none;
}
.ash-status-dot.active {
	background: var(--ash-cyan);
	box-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
}
.ash-status-dot.accent {
	background: var(--ash-violet);
	box-shadow: 0 0 6px rgba(137, 87, 229, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   LIVE PULSE RING INDICATOR
   ═══════════════════════════════════════════════════════════ */

.ash-pulse-ring {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	position: relative;
	display: inline-block;
}

.ash-pulse-ring::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 6px currentColor;
}

.ash-pulse-ring::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid currentColor;
	animation: ash-ring-out 2s ease-out infinite;
	opacity: 0;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.ash-btn {
	font-family: var(--ash-font-mono);
	font-size: 10px;
	padding: 5px 14px;
	border-radius: 3px;
	cursor: pointer;
	letter-spacing: 0.5px;
	transition: all var(--ash-dur-short) var(--ash-ease);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ash-btn-primary {
	background: rgba(0, 240, 255, 0.06);
	border: 1px solid rgba(0, 240, 255, 0.25);
	color: var(--ash-cyan);
}
.ash-btn-primary:hover {
	background: rgba(0, 240, 255, 0.12);
	box-shadow:
		0 0 20px rgba(0, 240, 255, 0.15),
		inset 0 0 20px rgba(0, 240, 255, 0.05);
	transform: translateY(-1px);
}

.ash-btn-alert {
	background: rgba(255, 45, 106, 0.06);
	border: 1px solid rgba(255, 45, 106, 0.25);
	color: var(--ash-magenta);
}
.ash-btn-alert:hover {
	background: rgba(255, 45, 106, 0.12);
	box-shadow:
		0 0 20px rgba(255, 45, 106, 0.15),
		inset 0 0 20px rgba(255, 45, 106, 0.05);
	transform: translateY(-1px);
}

.ash-btn-ghost {
	background: transparent;
	border: 1px solid rgba(0, 240, 255, 0.06);
	color: var(--ash-text-dim);
}
.ash-btn-ghost:hover {
	color: var(--ash-text);
	border-color: rgba(0, 240, 255, 0.15);
	background: rgba(255, 255, 255, 0.02);
}

.ash-btn-holo {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(137, 87, 229, 0.08));
	border: 1px solid rgba(0, 240, 255, 0.2);
	color: var(--ash-cyan);
}
.ash-btn-holo:hover {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(137, 87, 229, 0.12));
	box-shadow: var(--ash-glow-cyan);
	transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   PILLS / TAGS
   ═══════════════════════════════════════════════════════════ */

.ash-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--ash-font-mono);
	font-size: 9px;
	padding: 2px 8px;
	border-radius: 10px;
	border: 1px solid;
	letter-spacing: 0.5px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ash-pill-cyan {
	color: var(--ash-cyan);
	border-color: rgba(0, 240, 255, 0.2);
	background: rgba(0, 240, 255, 0.05);
}
.ash-pill-magenta {
	color: var(--ash-magenta);
	border-color: rgba(255, 45, 106, 0.2);
	background: rgba(255, 45, 106, 0.05);
}
.ash-pill-green {
	color: var(--ash-green);
	border-color: rgba(57, 255, 20, 0.2);
	background: rgba(57, 255, 20, 0.05);
}
.ash-pill-amber {
	color: var(--ash-amber);
	border-color: rgba(255, 182, 39, 0.2);
	background: rgba(255, 182, 39, 0.05);
}
.ash-pill-violet {
	color: var(--ash-violet);
	border-color: rgba(137, 87, 229, 0.2);
	background: rgba(137, 87, 229, 0.05);
}
.ash-pill-red {
	color: var(--ash-red);
	border-color: rgba(255, 68, 68, 0.2);
	background: rgba(255, 68, 68, 0.05);
}

/* ═══════════════════════════════════════════════════════════
   INPUT FIELDS
   ═══════════════════════════════════════════════════════════ */

.ash-input {
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--ash-glass-border);
	color: var(--ash-text);
	font-family: var(--ash-font-mono);
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 3px;
	outline: none;
	transition:
		border-color var(--ash-dur-short),
		box-shadow var(--ash-dur-short);
}

.ash-input:focus {
	border-color: rgba(0, 240, 255, 0.3);
	box-shadow:
		0 0 0 1px rgba(0, 240, 255, 0.05),
		0 0 20px rgba(0, 240, 255, 0.06);
}

.ash-input::placeholder {
	color: var(--ash-text-dim);
}

/* ═══════════════════════════════════════════════════════════
   HOLOGRAPHIC TEXT
   ═══════════════════════════════════════════════════════════ */

.ash-holo-text {
	background: linear-gradient(
		90deg,
		var(--ash-cyan) 0%,
		#a0f0ff 25%,
		var(--ash-cyan) 50%,
		#80e0ff 75%,
		var(--ash-cyan) 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: ash-holo-text 4s linear infinite;
	filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.3));
}

/* ═══════════════════════════════════════════════════════════
   SECTION DIVIDER
   ═══════════════════════════════════════════════════════════ */

.ash-divider {
	height: 1px;
	background: var(--ash-chrome-edge);
}

/* ═══════════════════════════════════════════════════════════
   FLEET ALERT BANNER
   ═══════════════════════════════════════════════════════════ */

.ash-fleet-alert {
	background: rgba(255, 45, 106, 0.04);
	backdrop-filter: var(--ash-glass-frost);
	-webkit-backdrop-filter: var(--ash-glass-frost);
	border: 1px solid rgba(255, 45, 106, 0.2);
	border-radius: 6px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
	overflow: hidden;
	animation: ash-alert-breathe var(--ash-dur-pulse) ease-in-out infinite;
}

.ash-fleet-alert::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 300%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ash-magenta), transparent);
	animation: ash-scan-bar 2s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   SCANLINE OVERLAY (opt-in via class on body or container)
   ═══════════════════════════════════════════════════════════ */

.ash-scanlines::after {
	content: "";
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent 0px,
		transparent 3px,
		rgba(0, 0, 0, 0.015) 3px,
		rgba(0, 0, 0, 0.015) 6px
	);
	pointer-events: none;
	z-index: 9998;
}

/* ═══════════════════════════════════════════════════════════
   HUD GRID OVERLAY (opt-in)
   ═══════════════════════════════════════════════════════════ */

.ash-hud-grid::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 240, 255, 0.015) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 240, 255, 0.015) 1px, transparent 1px);
	background-size: 80px 80px;
	pointer-events: none;
	z-index: 1;
	mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(
		ellipse 90% 90% at 50% 50%,
		rgba(0, 0, 0, 0.3) 0%,
		transparent 70%
	);
}

/* ═══════════════════════════════════════════════════════════
   HIGH CONTRAST MODE
   ═══════════════════════════════════════════════════════════ */

.ash-high-contrast {
	--ash-surface-0: #000;
	--ash-surface-1: #050505;
	--ash-surface-2: #0a0a0a;
	--ash-surface-3: #111;
	--ash-surface-4: #1a1a1a;
	--ash-border-solid: #444;
	--ash-text: #fff;
	--ash-text-bright: #fff;
	--ash-text-dim: #999;
	--ash-text-muted: #bbb;
}

@media (prefers-contrast: more) {
	:root {
		--ash-surface-0: #000;
		--ash-surface-1: #050505;
		--ash-surface-2: #0a0a0a;
		--ash-surface-3: #111;
		--ash-surface-4: #1a1a1a;
		--ash-border-solid: #444;
		--ash-text: #fff;
		--ash-text-bright: #fff;
		--ash-text-dim: #999;
		--ash-text-muted: #bbb;
	}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE & TOUCH TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
	--ash-touch-min: 44px;
	--ash-orb-size: 48px;
	--ash-radial-radius: 100px;
	--ash-radial-spoke-size: 36px;
}

.ash-touch-target {
	min-height: var(--ash-touch-min);
	min-width: var(--ash-touch-min);
}

/* ═══════════════════════════════════════════════════════════
   FOCUS INDICATORS (accessibility)
   ═══════════════════════════════════════════════════════════ */

:focus-visible {
	outline: 2px solid var(--ash-cyan);
	outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ash-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}