/*
CP1 Reality OS V3.3.5 — Style Parity QA Override
Scope: public preview only.
Base CSS is not modified.
Purpose: reduce visual drift, align public landing with CP1 dark/blue/cyan brand, and keep the site production-ready visually.
*/

:root {
  --cp1-brand-navy: #071427;
  --cp1-brand-navy-2: #0b1b33;
  --cp1-brand-blue: #1f6fff;
  --cp1-brand-cyan: #16d5ff;
  --cp1-brand-aqua: #7cf6ff;
  --cp1-brand-ink: #eaf6ff;
  --cp1-brand-muted: #9fb4c8;
  --cp1-brand-line: rgba(124, 246, 255, 0.18);
  --cp1-brand-card: rgba(8, 23, 44, 0.76);
  --cp1-brand-card-strong: rgba(9, 31, 58, 0.90);
  --cp1-brand-glow: rgba(22, 213, 255, 0.20);
}

/* Overall public surface */
html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(22, 213, 255, 0.14), transparent 32rem),
    radial-gradient(circle at 82% 18%, rgba(31, 111, 255, 0.16), transparent 34rem),
    linear-gradient(180deg, var(--cp1-brand-navy), #050b16 58%, #04070d) !important;
  color: var(--cp1-brand-ink);
}

/* Header / navigation consistency */
.site-header,
header.site-header {
  background: rgba(5, 13, 25, 0.78) !important;
  border-bottom: 1px solid var(--cp1-brand-line) !important;
  backdrop-filter: blur(18px);
}

.brand img,
.site-header img[alt*="CP1"] {
  filter: drop-shadow(0 0 12px rgba(22, 213, 255, 0.16));
}

.site-header a,
nav a,
.mobile-menu-panel a {
  color: rgba(234, 246, 255, 0.86) !important;
}

.site-header a:hover,
nav a:hover,
.mobile-menu-panel a:hover {
  color: var(--cp1-brand-aqua) !important;
}

/* Typography hierarchy */
h1,
h2,
h3 {
  color: #f4fbff;
}

h1 {
  letter-spacing: -0.045em;
}

h2 {
  letter-spacing: -0.035em;
}

p,
li,
small,
.note,
.status,
.intro {
  color: rgba(234, 246, 255, 0.76);
}

.eyebrow,
.status,
.badges span,
.mack-badges span,
.console-disclosure span {
  color: var(--cp1-brand-aqua) !important;
  border-color: var(--cp1-brand-line) !important;
}

/* Buttons */
.button.primary,
a.button.primary,
button.button.primary {
  background: linear-gradient(135deg, var(--cp1-brand-blue), var(--cp1-brand-cyan)) !important;
  color: #02101f !important;
  border: 1px solid rgba(124, 246, 255, 0.38) !important;
  box-shadow: 0 18px 42px rgba(22, 213, 255, 0.20);
}

.button.secondary,
a.button.secondary,
button.button.secondary {
  color: var(--cp1-brand-ink) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--cp1-brand-line) !important;
}

.button.secondary:hover,
.button.primary:hover {
  transform: translateY(-1px);
}

/* Cards and shells */
.shell,
.card,
.path-card,
.visual-card,
.result-panel,
.form-panel,
.platform-card,
.office-layer article,
.evidence-grid article,
.workflow article,
.mack-route,
.console-result,
.builder,
.office-hero-card,
.office-layer,
.architecture-strip,
.maturity-grid article,
.observatory-grid article {
  background: var(--cp1-brand-card) !important;
  border: 1px solid var(--cp1-brand-line) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(22, 213, 255, 0.04) inset !important;
}

.path-card:hover,
.card:hover,
.visual-card:hover {
  border-color: rgba(124, 246, 255, 0.36) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34), 0 0 38px var(--cp1-brand-glow) !important;
}

/* Interactive elements */
button,
select,
textarea,
input {
  border-color: var(--cp1-brand-line) !important;
}

textarea,
select,
input {
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--cp1-brand-ink) !important;
}

button.active,
.engine-selector .active,
.model-selector .active,
.mack-examples .active {
  background: rgba(22, 213, 255, 0.14) !important;
  color: var(--cp1-brand-aqua) !important;
  border-color: rgba(124, 246, 255, 0.38) !important;
}

/* CP / office chips */
.cp,
.badges span,
.mack-badges span,
.architecture-strip span,
.office-layer span,
.pilot-steps .step,
.status.built,
.status.research {
  background: rgba(22, 213, 255, 0.08) !important;
  border-color: var(--cp1-brand-line) !important;
  color: rgba(234, 246, 255, 0.86) !important;
}

/* Footer */
.footer,
.section.footer {
  border-top: 1px solid var(--cp1-brand-line) !important;
  background: linear-gradient(180deg, rgba(7, 20, 39, 0.10), rgba(5, 11, 22, 0.72)) !important;
}

/* Keep links readable */
a {
  color: var(--cp1-brand-aqua);
}

/* Accessibility and reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}