/*
 * ogace-os-neural.css — OGACE OS Neural Design System (v1.0.0)
 * ---------------------------------------------------------------------------
 * The canonical front-end style layer for the OGACE OS travel vertical.
 * Replaces the legacy warm "Angkor earth" palette with the OGACE neural
 * terminal aesthetic: deep void surfaces, signal-cyan / sand accents, layered
 * glow, mono command chrome and the G0–G4 graph-layer language.
 *
 * Two jobs:
 *   1. Define the neural token set on a scope class (.ogace-os-neural) — NOT
 *      on bare :root — so it can never surprise a surface that still assumes
 *      the warm palette (the admin Command Center defines its own bg/fg and
 *      only borrows the --ogace-os-* accents, which are intentionally shifted
 *      to the neural signal hues here for a unified console look).
 *   2. Ship the shared components every OGACE OS surface reuses: the terminal
 *      prompt bar, the G0–G4 layer chips, neural panels, glow buttons.
 *
 * Each front surface (Contact, Plan My Trip, B2B Partner Portal) also carries
 * its own self-contained neural CSS so it renders correctly even if this
 * sheet is dequeued — this file is the source of truth they share, not a
 * hard dependency.
 *
 * @package OGACE
 */

/* =========================================================================
 * 1) Neural token set — scoped, plus a light accent bridge onto the
 *    legacy --ogace-os-* names so any surface opting into .ogace-os-neural
 *    inherits the signal palette without touching its own rules.
 * ====================================================================== */
.ogace-os-neural,
.ogace-os-contact.ogace-os-neural,
.ogace-os-pmt.ogace-os-neural,
.ogace-os-b2b-portal.ogace-os-neural {
	/* Void surfaces */
	--ogn-void:      #070d10;
	--ogn-panel:     #0c161b;
	--ogn-panel-2:   #11212a;
	--ogn-raised:    #16303b;
	--ogn-line:      #1d333d;
	--ogn-line-soft: rgba(120,200,220,.10);

	/* Text */
	--ogn-fg:        #e6f1f5;
	--ogn-fg-dim:    #8ba6b3;
	--ogn-fg-faint:  #5b7480;

	/* Signal accents */
	--ogn-cyan:      #2fd4e6;
	--ogn-cyan-deep: #17a8bd;
	--ogn-sand:      #f4b13c;
	--ogn-sand-deep: #d8912a;
	--ogn-green:     #35e0a1;
	--ogn-green-deep:#1fb37e;
	--ogn-blue:      #5aa8ff;
	--ogn-violet:    #a98bff;
	--ogn-red:       #ff6a5a;

	/* Graph-layer accents (G0 geo · G1 human · G2 AI · G3 economy · G4 auto) */
	--ogn-g0: #2fd4e6;
	--ogn-g1: #35e0a1;
	--ogn-g2: #a98bff;
	--ogn-g3: #f4b13c;
	--ogn-g4: #5aa8ff;

	/* Glow */
	--ogn-glow-cyan:  0 0 0 1px rgba(47,212,230,.30), 0 0 26px -8px rgba(47,212,230,.55);
	--ogn-glow-green: 0 0 0 1px rgba(53,224,161,.30), 0 0 26px -8px rgba(53,224,161,.55);
	--ogn-glow-sand:  0 0 0 1px rgba(244,177,60,.30), 0 0 26px -8px rgba(244,177,60,.55);

	/* Type */
	--ogn-mono: var(--ogace-os-font-mono, ui-monospace, "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace);
	--ogn-body: var(--ogace-os-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--ogn-radius: 16px;

	/* Legacy-token bridge: opting into .ogace-os-neural remaps the warm
	 * --ogace-os-* names to the neural signal hues, so a surface's existing
	 * var(--ogace-os-laterite,#c14a26) references pick up cyan automatically. */
	--ogace-os-ink:            var(--ogn-fg);
	--ogace-os-ink-soft:       var(--ogn-fg-dim);
	--ogace-os-paper:          var(--ogn-panel);
	--ogace-os-stone:          var(--ogn-panel-2);
	--ogace-os-stone-dim:      var(--ogn-line);
	--ogace-os-laterite:       var(--ogn-cyan);
	--ogace-os-laterite-dark:  var(--ogn-cyan-deep);
	--ogace-os-coral:          var(--ogn-sand);
	--ogace-os-jungle:         var(--ogn-green);
	--ogace-os-jungle-light:   var(--ogn-green-deep);
	--ogace-os-river:          var(--ogn-blue);
	--ogace-os-gold:           var(--ogn-sand);
	--ogace-os-gold-soft:      var(--ogn-panel-2);
}

/* =========================================================================
 * 2) Terminal prompt bar — the OGACE OS command signature.
 *    Renders "user@ogace:LAYER/module [STATE] $" in mono with a live caret.
 * ====================================================================== */
.ogace-os-term {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--ogn-mono);
	font-size: .82rem;
	line-height: 1;
	color: var(--ogn-fg-dim);
	background: linear-gradient(180deg, var(--ogn-panel-2), var(--ogn-panel));
	border: 1px solid var(--ogn-line);
	border-radius: 12px;
	padding: 11px 14px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 18px 40px -30px rgba(0,0,0,.9);
}
.ogace-os-term-dots { display: inline-flex; gap: 6px; margin-right: 2px; }
.ogace-os-term-dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; opacity: .85; }
.ogace-os-term-dots i:nth-child(1) { background: var(--ogn-red); }
.ogace-os-term-dots i:nth-child(2) { background: var(--ogn-sand); }
.ogace-os-term-dots i:nth-child(3) { background: var(--ogn-green); }
.ogace-os-term-prompt { color: var(--ogn-fg); letter-spacing: .01em; }
.ogace-os-term-prompt .u  { color: var(--ogn-cyan); }
.ogace-os-term-prompt .h  { color: var(--ogn-fg-dim); }
.ogace-os-term-prompt .l  { color: var(--ogn-violet); }
.ogace-os-term-prompt .p  { color: var(--ogn-sand); }
.ogace-os-term-prompt .sy { color: var(--ogn-green); }
.ogace-os-term-state {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ogn-green);
	border: 1px solid rgba(53,224,161,.35);
	background: rgba(53,224,161,.08);
	padding: 4px 9px;
	border-radius: 999px;
}
.ogace-os-term-state::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ogn-green);
	box-shadow: 0 0 0 3px rgba(53,224,161,.18);
	animation: ogn-pulse 2.4s ease-in-out infinite;
}
.ogace-os-caret {
	display: inline-block;
	width: .55ch; height: 1.05em;
	margin-left: 1px;
	background: var(--ogn-cyan);
	vertical-align: -.16em;
	animation: ogn-blink 1.1s steps(1) infinite;
}
@keyframes ogn-blink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }
@keyframes ogn-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* =========================================================================
 * 3) G0–G4 graph-layer chips.
 * ====================================================================== */
.ogace-os-glayers { display: flex; flex-wrap: wrap; gap: 7px; }
.ogace-os-glayer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ogn-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	color: var(--ogn-fg-dim);
	background: var(--ogn-panel);
	border: 1px solid var(--ogn-line);
	border-radius: 999px;
	padding: 5px 11px;
}
.ogace-os-glayer::before {
	content: "";
	width: 8px; height: 8px; border-radius: 2px;
	background: currentColor;
}
.ogace-os-glayer.g0 { color: var(--ogn-g0); }
.ogace-os-glayer.g1 { color: var(--ogn-g1); }
.ogace-os-glayer.g2 { color: var(--ogn-g2); }
.ogace-os-glayer.g3 { color: var(--ogn-g3); }
.ogace-os-glayer.g4 { color: var(--ogn-g4); }
.ogace-os-glayer b { color: var(--ogn-fg); font-weight: 600; }

/* =========================================================================
 * 4) Shared neural primitives — panels, scanline texture, glow buttons.
 * ====================================================================== */
.ogace-os-neural { color: var(--ogn-fg); font-family: var(--ogn-body); }
.ogace-os-neural ::selection { background: rgba(47,212,230,.28); }

.ogace-os-panel {
	background:
		linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
		var(--ogn-panel);
	border: 1px solid var(--ogn-line);
	border-radius: var(--ogn-radius);
}
.ogace-os-scan {
	position: relative;
	overflow: hidden;
}
.ogace-os-scan::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(120,200,220,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120,200,220,.05) 1px, transparent 1px);
	background-size: 30px 30px;
	mask-image: radial-gradient(90% 80% at 50% 0%, #000 0%, transparent 78%);
	pointer-events: none;
}
.ogace-os-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--ogn-mono);
	font-weight: 600; font-size: .92rem; line-height: 1;
	padding: 13px 22px;
	border-radius: 11px;
	border: 1px solid transparent;
	cursor: pointer; text-decoration: none;
	transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.ogace-os-btn-cyan  { background: linear-gradient(180deg, var(--ogn-cyan), var(--ogn-cyan-deep)); color: #041016; box-shadow: var(--ogn-glow-cyan); }
.ogace-os-btn-cyan:hover  { transform: translateY(-2px); }
.ogace-os-btn-green { background: linear-gradient(180deg, var(--ogn-green), var(--ogn-green-deep)); color: #04140e; box-shadow: var(--ogn-glow-green); }
.ogace-os-btn-green:hover { transform: translateY(-2px); }
.ogace-os-btn-ghost { background: rgba(255,255,255,.02); color: var(--ogn-fg); border-color: var(--ogn-line); }
.ogace-os-btn-ghost:hover { border-color: var(--ogn-cyan); color: var(--ogn-cyan); }

@media (prefers-reduced-motion: reduce) {
	.ogace-os-caret, .ogace-os-term-state::before { animation: none; }
	.ogace-os-btn { transition: none; }
}