/*
 * Reversible Figure 02 light theme.
 * Remove the theme-light.css <link> from index.html to restore the original dark artwork.
 */

:root {
  --black: #f1f1ef;
  --white: #30332f;
  --muted: #777c77;
  --line: #717873;
  --blue: #527e94;
  --blue-bright: #376f8a;
  --sand: #a27a49;
  --sand-bright: #8d673d;
}

body {
  background: #f1f1ef;
  color: #30332f;
}

.site-header {
  border-color: #cdd0cb;
}

.brand-logo {
  filter: invert(1);
  opacity: .82;
}

.site-header p,
.section-label,
.input-label,
.output-label,
.robot-label,
.robot-output,
.wire-label,
.feedback-copy {
  fill: #747a75;
  color: #747a75;
}

.background {
  fill: #f1f1ef;
}

.world-haze {
  fill: #7091a1;
  opacity: .045;
}

.robot-haze {
  fill: #7da0b0;
  opacity: .055;
}

.header-rule {
  stroke: #c7cac5;
}

.slow-feedback,
.fast-feedback,
.input-wire,
.context-wire,
.output-wire,
.state-wire {
  stroke: #686f6a;
}

#arrow-white path,
#arrow-blue path {
  fill: #686f6a;
}

.signal-slow,
.signal-fast,
.world-node,
.motion-node,
.wire-node,
.state-dot {
  fill: #58635d;
  stroke: #58635d;
  filter: none;
}

.frame-shadow {
  fill: #d8dbd6;
  stroke: #b7bcb7;
}

.camera-frame {
  fill: #e6e8e4;
  stroke: #8e9690;
}

.camera-video {
  filter: saturate(.9) contrast(1.04) brightness(1.04);
}

.language-title,
.state-title,
.model-type,
.model-name,
.expert-title,
.output-title {
  fill: #303430;
}

.blue-label,
.slow-copy,
.world-label {
  fill: #46758c;
}

.motion-label {
  fill: #936e40;
}

.state-box {
  fill: #fafaf7;
  stroke: #aeb4af;
}

.state-grid {
  stroke: rgba(61, 69, 64, .12);
}

.harmonic-primary {
  stroke: #3f4843;
  filter: none;
}

.harmonic-secondary {
  stroke: #89908b;
}

.state-scan {
  stroke: rgba(63, 83, 73, .45);
  filter: none;
}

.model-shell {
  fill: #e4e6e1;
  stroke: #a3aaa4;
  filter: drop-shadow(0 12px 24px rgba(52, 58, 54, .08));
}

.model-grid {
  opacity: 0;
}

.model-inner-line,
.model-header-rule {
  stroke: rgba(67, 74, 69, .16);
}

.model-symbol-dot {
  fill: #718078;
}

.unified-expert-shell .unified-surface {
  fill: #f8f8f5;
  stroke: none;
  filter: drop-shadow(0 10px 18px rgba(52, 58, 54, .075));
}

.unified-expert-shell .unified-border {
  stroke: #aab0aa;
}

.unified-glow {
  fill: rgba(111, 130, 120, .045);
}

.unified-topography {
  stroke: rgba(83, 94, 87, .095);
}

.expert-description,
.panel-meta {
  fill: #747a75;
}

.panel-rule,
.motion-visual-border {
  stroke: rgba(71, 79, 74, .2);
}

.predictive-surface {
  fill: #eef2f0;
  stroke: #aab6b0;
}

.vision-token-bank rect {
  fill: rgba(77, 117, 137, .13);
  stroke: rgba(68, 108, 128, .48);
}

.language-token-bank path,
.context-fusion-link,
.context-relation,
.context-field-lattice path {
  stroke: rgba(70, 88, 79, .55);
}

.context-field-halo {
  fill: rgba(79, 117, 136, .08);
  stroke: rgba(75, 101, 88, .16);
}

.context-field-lattice circle,
.context-flow-packet,
.context-relation-packet {
  fill: #426f84;
  filter: none;
}

.context-entity > rect {
  fill: rgba(246, 248, 245, .95);
  stroke: rgba(79, 92, 84, .42);
}

.context-entity circle,
.context-entity > rect:last-child,
.context-entity path {
  fill: #75867d;
}

.motion-latent-image {
  opacity: .88;
  filter: grayscale(.82) contrast(1.02) brightness(1.08);
}

.motion-latent-tint {
  fill: rgba(241, 241, 237, .12);
}

.motion-energy-line,
.motion-energy-line-secondary {
  stroke: #8a704f;
  filter: none;
}

.motion-vector-nodes circle {
  fill: #8a704f;
  filter: none;
}

.context-halo {
  fill: #637a6f;
  opacity: .08;
}

.context-plate {
  fill: #343b37;
  stroke: #737d77;
}

.context-orbit,
.symbiotic-attention-links {
  stroke: #b8c2bc;
}

.symbiotic-attention-nodes circle,
.symbiotic-attention-nodes .symbiotic-center-node {
  fill: #edf1ee;
  filter: none;
}

.context-core .context-title {
  fill: #39413c;
}

.pd-capsule rect {
  fill: #fafaf7;
  stroke: #929a94;
}

.pd-capsule text {
  fill: #343934;
}

.robot-aura {
  fill: rgba(93, 127, 143, .075);
}

.robot-ground {
  fill: rgba(89, 101, 95, .1);
  stroke: rgba(89, 101, 95, .18);
}

.robot-product {
  filter: drop-shadow(0 18px 18px rgba(48, 54, 50, .2));
}

.sensor-port,
.state-port {
  fill: #516f7c;
  stroke: #f1f1ef;
  filter: none;
}

.scan-line,
.world-scan {
  fill: #6e99ad;
  filter: none;
}

@keyframes context-token-pulse {
  0%, 100% { fill: rgba(77, 117, 137, .09); stroke: rgba(68, 108, 128, .32); }
  28%, 52% { fill: rgba(77, 117, 137, .24); stroke: rgba(54, 99, 121, .7); }
}