/* RAE Theme — Midnight Navy + Coral Neon
   Token layer + shared components.
   Spec: docs/superpowers/specs/2026-07-14-rae-visual-redesign-design.md
   Load order: after CoreUI CSS, before custom.css and per-page CSS. */

/* ===== Fonts (self-hosted) ===== */
@font-face {
  font-family: 'JetBrains Mono';
  src: url("../fonts/jetbrains-mono-400.caf0dfde4e44.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("../fonts/jetbrains-mono-600.075ec35bc15b.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ===== Tokens — dark is the default theme ===== */
:root,
[data-coreui-theme="dark"] {
  --rae-bg: #1a1a2e;
  --rae-surface: #16213e;
  --rae-deep: #0f3460;
  --rae-border: #2a3a5e;
  --rae-coral: #e94560;
  --rae-coral-hover: #ff5d76;
  --rae-orange: #f0883e;
  --rae-mint: #4ecca3;
  --rae-gold: #f0c040;
  --rae-blue: #79c0ff;
  --rae-text: #e6e6f0;
  --rae-text-muted: #9a9ab5;
  --rae-text-faint: #66667f;
  --rae-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

[data-coreui-theme="light"] {
  --rae-bg: #faf9fc;
  --rae-surface: #ffffff;
  --rae-deep: #e7e3f0;
  --rae-border: #ddd8e8;
  --rae-coral: #d63350;
  --rae-coral-hover: #b8273f;
  --rae-orange: #e0762f;
  --rae-mint: #178a68;
  --rae-gold: #b8860b;
  --rae-blue: #0d6efd;
  --rae-text: #2b2b3a;
  --rae-text-muted: #6a6a82;
  --rae-text-faint: #9a9ab0;
}

/* ===== Utilities ===== */
.rae-mono { font-family: var(--rae-mono); }

/* ===== Primary CTA — coral ember pill ===== */
.btn-rae {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, var(--rae-coral) 0%, var(--rae-orange) 100%);
  border: none;
  border-radius: 50px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(233, 69, 96, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-rae::before {
  content: '';
  position: absolute;
  top: 0;
  left: -110%;
  width: 90%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28) 50%, transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn-rae:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(233, 69, 96, 0.5),
              0 3px 10px rgba(240, 136, 62, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-rae:hover::before { left: 120%; }
.btn-rae:active { transform: translateY(-1px); }
.btn-rae svg { transition: transform 0.25s ease; }
.btn-rae:hover svg { transform: translateX(4px); }
.btn-rae:focus-visible { outline: 2px solid var(--rae-gold); outline-offset: 3px; }

[data-coreui-theme="light"] .btn-rae {
  box-shadow: 0 4px 18px rgba(214, 51, 80, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
[data-coreui-theme="light"] .btn-rae:hover {
  box-shadow: 0 10px 28px rgba(214, 51, 80, 0.38),
              0 3px 10px rgba(224, 118, 47, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ===== Ghost secondary ===== */
.btn-rae-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rae-text);
  background: rgba(233, 69, 96, 0.07);
  border: 1px solid rgba(233, 69, 96, 0.55);
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-rae-ghost:hover {
  color: var(--rae-text);
  transform: translateY(-3px);
  background: rgba(233, 69, 96, 0.16);
  border-color: var(--rae-coral);
}
[data-coreui-theme="light"] .btn-rae-ghost {
  background: rgba(214, 51, 80, 0.06);
  border-color: rgba(214, 51, 80, 0.5);
}
.btn-rae-ghost:focus-visible { outline: 2px solid var(--rae-gold); outline-offset: 3px; }

/* ===== Demo variant =====
   Ghost geometry, but gold rather than coral. Coral is the palette's action
   colour and belongs to the real sign-in; a coral demo button would compete
   with it and read as the primary path. Gold is the highlight slot, so it marks
   this as "look around first" without shouting. The dashed border does the rest
   of the work: nothing else on the site is dashed, so it reads as provisional
   even before the label is read. */
.btn-rae-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rae-gold);
  background: rgba(240, 192, 64, 0.08);
  border: 1px dashed rgba(240, 192, 64, 0.55);
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-rae-demo:hover {
  color: var(--rae-gold);
  transform: translateY(-3px);
  background: rgba(240, 192, 64, 0.17);
  border-color: var(--rae-gold);
}
.btn-rae-demo svg { transition: transform 0.25s ease; }
.btn-rae-demo:hover svg { transform: scale(1.12); }
/* Coral, not gold, so the ring stays visible against a gold button. */
.btn-rae-demo:focus-visible { outline: 2px solid var(--rae-coral); outline-offset: 3px; }

[data-coreui-theme="light"] .btn-rae-demo {
  background: rgba(184, 134, 11, 0.07);
  border-color: rgba(184, 134, 11, 0.5);
}
[data-coreui-theme="light"] .btn-rae-demo:hover {
  background: rgba(184, 134, 11, 0.14);
}

/* Primary and demo side by side; wraps rather than overflowing on narrow screens.
   justify-content is explicit because a flex container ignores the inherited
   `text-align: center` that centred the button back when it was a lone inline
   element. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn-rae, .btn-rae svg, .btn-rae::before,
  .btn-rae-ghost, .btn-rae-demo, .btn-rae-demo svg { transition: none; }
}

/* ===== Background system =====
   .rae-aurora        = glow fields + grain (landing)
   .rae-aurora-plain  = glow fields only, no grain/traces (content + auth pages)
   Traces SVG partial = templates/base/trace_background.html            */

.rae-aurora,
.rae-aurora-plain { position: relative; }

.rae-aurora::before,
.rae-aurora-plain::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 48% at 18% 12%, rgba(233, 69, 96, 0.17), transparent 68%),
    radial-gradient(ellipse 70% 55% at 85% 30%, rgba(15, 52, 96, 0.85), transparent 75%),
    radial-gradient(ellipse 55% 42% at 78% 95%, rgba(78, 204, 163, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 30% at 45% 55%, rgba(240, 192, 64, 0.05), transparent 70%),
    linear-gradient(175deg, #1a1a2e 0%, #16213e 100%);
}

[data-coreui-theme="light"] .rae-aurora::before,
[data-coreui-theme="light"] .rae-aurora-plain::before {
  background:
    radial-gradient(ellipse 60% 48% at 18% 12%, rgba(214, 51, 80, 0.09), transparent 68%),
    radial-gradient(ellipse 70% 55% at 85% 30%, rgba(138, 92, 176, 0.10), transparent 75%),
    radial-gradient(ellipse 55% 42% at 78% 95%, rgba(23, 138, 104, 0.08), transparent 70%),
    radial-gradient(ellipse 40% 30% at 45% 55%, rgba(184, 134, 11, 0.05), transparent 70%),
    linear-gradient(175deg, #faf9fc 0%, #f1eff7 100%);
}

/* Film grain — dark theme only; fuses aurora + traces into one surface */
.rae-aurora::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}
[data-coreui-theme="light"] .rae-aurora::after { display: none; }

/* Trace layer container (wraps the SVG partial) */
.rae-traces {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 42%, transparent 38%, black 82%);
  mask-image: radial-gradient(ellipse 62% 55% at 50% 42%, transparent 38%, black 82%);
}
.rae-traces svg { width: 100%; height: 100%; }

/* Theme-driven trace colors (SVG uses currentColor via classes) */
.rae-trace-mint  { stroke: var(--rae-mint);  stroke-opacity: 0.10; }
.rae-trace-coral { stroke: var(--rae-coral); stroke-opacity: 0.08; }
.rae-via         { stroke: var(--rae-mint);  stroke-opacity: 0.28; fill: var(--rae-surface); }
[data-coreui-theme="light"] .rae-trace-mint  { stroke-opacity: 0.12; }
[data-coreui-theme="light"] .rae-trace-coral { stroke-opacity: 0.10; }
[data-coreui-theme="light"] .rae-via         { stroke-opacity: 0.30; }

/* Signal pulses — a short bright segment travels a trace, then the trace rests dark */
.rae-pulse {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 10 110;
  stroke-dashoffset: 120;
  animation: rae-trace-travel 11s linear infinite;
}
.rae-pulse.mint  { stroke: var(--rae-mint);  stroke-opacity: 0.45; }
.rae-pulse.coral { stroke: var(--rae-coral); stroke-opacity: 0.35; }
[data-coreui-theme="light"] .rae-pulse.mint  { stroke-opacity: 0.40; }
[data-coreui-theme="light"] .rae-pulse.coral { stroke-opacity: 0.30; }
.rae-pulse.d2 { animation-delay: -4s; animation-duration: 13s; }
.rae-pulse.d3 { animation-delay: -8s; animation-duration: 15s; }
@keyframes rae-trace-travel {
  0%   { stroke-dashoffset: 120; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* Via nodes breathe, echoing telemetry LEDs */
.rae-via-breathe { animation: rae-via-glow 6s ease-in-out infinite; }
.rae-via-breathe.v2 { animation-delay: -2s; }
.rae-via-breathe.v3 { animation-delay: -4s; }
@keyframes rae-via-glow {
  0%, 100% { stroke-opacity: 0.28; }
  50%      { stroke-opacity: 0.60; }
}

@media (prefers-reduced-motion: reduce) {
  .rae-pulse { animation: none; stroke-opacity: 0; }
  .rae-via-breathe { animation: none; }
}


/* ===== Private site: CoreUI variable overrides =====
   Dashboards get a flat navy ground — no aurora/traces/grain. */
[data-coreui-theme="dark"] {
  --cui-body-bg: var(--rae-bg);
  --cui-body-color: var(--rae-text);
  --cui-secondary-color: var(--rae-text-muted);
  --cui-tertiary-color: var(--rae-text-faint);
  --cui-border-color: var(--rae-border);
  --cui-card-bg: var(--rae-surface);
  --cui-card-border-color: var(--rae-border);
  --cui-tertiary-bg: var(--rae-surface);
  --cui-secondary-bg: var(--rae-deep);
  --cui-link-color: var(--rae-blue);
  --cui-link-hover-color: #a5d0ff;
  --cui-primary: var(--rae-coral);
  --cui-primary-rgb: 233, 69, 96;
  --cui-success: var(--rae-mint);
  --cui-success-rgb: 78, 204, 163;
  --cui-warning: var(--rae-gold);
  --cui-warning-rgb: 240, 192, 64;
  --cui-danger: var(--rae-coral);
  --cui-danger-rgb: 233, 69, 96;
}
[data-coreui-theme="light"] {
  --cui-body-bg: var(--rae-bg);
  --cui-body-color: var(--rae-text);
  --cui-secondary-color: var(--rae-text-muted);
  --cui-tertiary-color: var(--rae-text-faint);
  --cui-border-color: var(--rae-border);
  --cui-card-bg: var(--rae-surface);
  --cui-card-border-color: var(--rae-border);
  --cui-tertiary-bg: var(--rae-surface);
  --cui-secondary-bg: var(--rae-deep);
  --cui-link-color: var(--rae-blue);
  --cui-link-hover-color: #0a58ca;
  --cui-primary: var(--rae-coral);
  --cui-primary-rgb: 214, 51, 80;
  --cui-success: var(--rae-mint);
  --cui-success-rgb: 23, 138, 104;
  --cui-warning: var(--rae-gold);
  --cui-warning-rgb: 184, 134, 11;
  --cui-danger: var(--rae-coral);
  --cui-danger-rgb: 214, 51, 80;
}

/* Sidebar */
[data-coreui-theme="dark"] .sidebar {
  --cui-sidebar-bg: var(--rae-surface);
  --cui-sidebar-color: var(--rae-text-muted);
  --cui-sidebar-nav-link-color: var(--rae-text-muted);
  --cui-sidebar-nav-link-hover-color: var(--rae-text);
  --cui-sidebar-nav-link-hover-bg: rgba(233, 69, 96, 0.08);
  --cui-sidebar-nav-link-active-color: var(--rae-coral);
  --cui-sidebar-nav-link-active-bg: rgba(233, 69, 96, 0.14);
  border-right: 1px solid var(--rae-border);
}
[data-coreui-theme="light"] .sidebar {
  --cui-sidebar-bg: var(--rae-surface);
  --cui-sidebar-color: var(--rae-text-muted);
  --cui-sidebar-nav-link-color: var(--rae-text-muted);
  --cui-sidebar-nav-link-hover-color: var(--rae-text);
  --cui-sidebar-nav-link-hover-bg: rgba(214, 51, 80, 0.08);
  --cui-sidebar-nav-link-active-color: var(--rae-coral);
  --cui-sidebar-nav-link-active-bg: rgba(214, 51, 80, 0.14);
  border-right: 1px solid var(--rae-border);
}
.sidebar .nav-link.active { border-left: 2px solid var(--rae-coral); }

/* Header */
[data-coreui-theme="dark"] .header {
  --cui-header-bg: var(--rae-surface);
  --cui-header-color: var(--rae-text);
  border-bottom: 1px solid var(--rae-border);
}
[data-coreui-theme="light"] .header {
  --cui-header-bg: var(--rae-surface);
  --cui-header-color: var(--rae-text);
  border-bottom: 1px solid var(--rae-border);
}

/* Stat/metric values — mono, tabular numerals.
   Repeat-class specificity (0,2,0) so these win over the pre-existing
   .stat-value / .stat-label rules in per-page CSS that load later. */
.rae-stat-value.rae-stat-value {
  font-family: var(--rae-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rae-stat-label.rae-stat-label {
  font-family: var(--rae-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rae-text-faint);
}

/* ===== Raw Bootstrap/CoreUI buttons (.btn-primary, .btn-success, etc.) =====
   CoreUI's compiled CSS bakes each variant's color into its OWN component-
   scoped custom properties (--cui-btn-bg, --cui-btn-border-color, ...) rather
   than reading the root --cui-primary/--cui-success/... tokens set above, so
   overriding those root tokens alone has no visible effect on real .btn-*
   elements (login/register forms, private-dashboard buttons).

   CoreUI ALSO ships a `[data-coreui-theme="dark"] .btn-primary { ... }` rule
   per variant (specificity 0,2,0) that reasserts its own hardcoded color in
   dark mode specifically. A plain `.btn-primary` override (0,1,0) loses to
   that rule regardless of source order, so every selector below is scoped
   under both `[data-coreui-theme="dark"]` and `[data-coreui-theme="light"]`
   to match/beat that specificity in both themes. The var(--rae-*) tokens
   already resolve per-theme, so both branches share identical values. */
[data-coreui-theme="dark"] .btn-primary,
[data-coreui-theme="light"] .btn-primary,
[data-coreui-theme="dark"] .btn-outline-primary,
[data-coreui-theme="light"] .btn-outline-primary {
  --cui-btn-color: #fff;
  --cui-btn-bg: var(--rae-coral);
  --cui-btn-border-color: var(--rae-coral);
  --cui-btn-hover-color: #fff;
  --cui-btn-hover-bg: var(--rae-coral-hover);
  --cui-btn-hover-border-color: var(--rae-coral-hover);
  --cui-btn-active-color: #fff;
  --cui-btn-active-bg: var(--rae-coral-hover);
  --cui-btn-active-border-color: var(--rae-coral-hover);
  --cui-btn-focus-shadow-rgb: 233, 69, 96;
}
[data-coreui-theme="dark"] .btn-outline-primary,
[data-coreui-theme="light"] .btn-outline-primary {
  --cui-btn-color: var(--rae-coral);
  --cui-btn-bg: transparent;
  --cui-btn-hover-color: #fff;
}

[data-coreui-theme="dark"] .btn-success,
[data-coreui-theme="light"] .btn-success,
[data-coreui-theme="dark"] .btn-outline-success,
[data-coreui-theme="light"] .btn-outline-success {
  --cui-btn-color: #06281f;
  --cui-btn-bg: var(--rae-mint);
  --cui-btn-border-color: var(--rae-mint);
  --cui-btn-hover-color: #06281f;
  --cui-btn-hover-bg: var(--rae-mint);
  --cui-btn-hover-border-color: var(--rae-mint);
  --cui-btn-active-color: #06281f;
  --cui-btn-active-bg: var(--rae-mint);
  --cui-btn-active-border-color: var(--rae-mint);
  --cui-btn-focus-shadow-rgb: 78, 204, 163;
}
[data-coreui-theme="dark"] .btn-outline-success,
[data-coreui-theme="light"] .btn-outline-success {
  --cui-btn-color: var(--rae-mint);
  --cui-btn-bg: transparent;
}

[data-coreui-theme="dark"] .btn-warning,
[data-coreui-theme="light"] .btn-warning,
[data-coreui-theme="dark"] .btn-outline-warning,
[data-coreui-theme="light"] .btn-outline-warning {
  --cui-btn-color: #2b2100;
  --cui-btn-bg: var(--rae-gold);
  --cui-btn-border-color: var(--rae-gold);
  --cui-btn-hover-color: #2b2100;
  --cui-btn-hover-bg: var(--rae-gold);
  --cui-btn-hover-border-color: var(--rae-gold);
  --cui-btn-active-color: #2b2100;
  --cui-btn-active-bg: var(--rae-gold);
  --cui-btn-active-border-color: var(--rae-gold);
  --cui-btn-focus-shadow-rgb: 240, 192, 64;
}
[data-coreui-theme="dark"] .btn-outline-warning,
[data-coreui-theme="light"] .btn-outline-warning {
  --cui-btn-color: var(--rae-gold);
  --cui-btn-bg: transparent;
}

[data-coreui-theme="dark"] .btn-danger,
[data-coreui-theme="light"] .btn-danger,
[data-coreui-theme="dark"] .btn-outline-danger,
[data-coreui-theme="light"] .btn-outline-danger {
  --cui-btn-color: #fff;
  --cui-btn-bg: var(--rae-coral);
  --cui-btn-border-color: var(--rae-coral);
  --cui-btn-hover-color: #fff;
  --cui-btn-hover-bg: var(--rae-coral-hover);
  --cui-btn-hover-border-color: var(--rae-coral-hover);
  --cui-btn-active-color: #fff;
  --cui-btn-active-bg: var(--rae-coral-hover);
  --cui-btn-active-border-color: var(--rae-coral-hover);
  --cui-btn-focus-shadow-rgb: 233, 69, 96;
}
[data-coreui-theme="dark"] .btn-outline-danger,
[data-coreui-theme="light"] .btn-outline-danger {
  --cui-btn-color: var(--rae-coral);
  --cui-btn-bg: transparent;
}