/* ==========================================================================
   Kodiak Defense - theme system
   --------------------------------------------------------------------------
   :root           = Glacier (default, dark)
   [data-palette="kd-dark"]  = KD Dark
   [data-palette="kd-light"] = KD Light
   RGB triplets so Tailwind's alpha modifier (bg-X/80) resolves correctly.
   ========================================================================== */

:root {
  /* Glacier - soft sky on slate (DEFAULT) */
  --c-bg:                  15 22 36;
  --c-surface:             27 41 66;
  --c-surface-elevated:    38 56 89;
  --c-surface-deep:        10 16 27;
  --c-line:                38 56 89;
  --c-line-soft:           27 41 66;
  --c-primary:             56 170 224;
  --c-accent:              125 211 252;
  --c-accent-soft:         186 230 253;
  --c-accent-glow:         125 211 252;
  --c-text:                224 234 246;
  --c-text-strong:         255 255 255;
  --c-muted:               156 184 213;
  --c-muted-soft:          196 215 232;
  --c-success:             34 197 94;
  --c-warning:             251 191 36;
  --c-danger:              239 68 68;
}

/* KD Dark - electric cyan on cool navy */
html[data-palette="kd-dark"] {
  --c-bg:                  10 18 32;
  --c-surface:             16 31 54;
  --c-surface-elevated:    21 38 63;
  --c-surface-deep:        6 11 20;
  --c-line:                31 42 61;
  --c-line-soft:           21 38 63;
  --c-primary:             44 127 214;
  --c-accent:              56 189 248;
  --c-accent-soft:         125 211 252;
  --c-accent-glow:         56 189 248;
  --c-text:                230 238 248;
  --c-text-strong:         255 255 255;
  --c-muted:               132 147 168;
  --c-muted-soft:          168 184 204;
  --c-success:             34 197 94;
  --c-warning:             251 191 36;
  --c-danger:              239 68 68;
}

/* KD Light - manager's light theme */
html[data-palette="kd-light"] {
  --c-bg:                  255 255 255;
  --c-surface:             239 244 249;
  --c-surface-elevated:    229 235 242;
  --c-surface-deep:        245 248 251;
  --c-line:                220 228 237;
  --c-line-soft:           229 235 242;
  --c-primary:             16 44 77;
  --c-accent:              22 144 194;
  --c-accent-soft:         59 178 224;
  --c-accent-glow:         22 144 194;
  --c-text:                12 30 51;
  --c-text-strong:         8 19 33;
  --c-muted:               92 107 126;
  --c-muted-soft:          126 141 159;
  --c-success:             21 128 61;
  --c-warning:             161 98 7;
  --c-danger:              185 28 28;
}

/* Smooth palette swap */
body, header, footer, nav, section, main, aside, article, div, span, a, p,
h1, h2, h3, h4, h5, h6, button, input, textarea, select, label, img, svg, li {
  transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease,
              box-shadow 260ms ease, fill 260ms ease, stroke 260ms ease;
}

/* ==========================================================================
   Base
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
  background-color: rgb(var(--c-bg) / 1);
  color: rgb(var(--c-text) / 1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgb(var(--c-accent) / 0.28);
  color: rgb(var(--c-text-strong) / 1);
}

/* Hide material symbols until icon font loads (no raw "arrow_forward" flash) */
.material-symbols-outlined { visibility: hidden; }
html.fonts-loaded .material-symbols-outlined { visibility: visible; }

/* Convert white logo to dark navy in light mode */
html[data-palette="kd-light"] img[src*="kd-logo-white"] {
  filter: brightness(0) saturate(100%) invert(11%) sepia(48%) saturate(2360%)
          hue-rotate(196deg) brightness(0.55) contrast(1.05);
}

/* ==========================================================================
   Reusable utilities (shared across all pages)
   ========================================================================== */
.mesh-hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 18% 28%, rgb(var(--c-accent) / 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 72%, rgb(var(--c-primary) / 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgb(var(--c-accent-glow) / 0.10) 0%, transparent 70%);
  filter: blur(2px);
  animation: mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%  { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: 0.92; }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); opacity: 1; }
}

.dots-grid {
  background-image: radial-gradient(rgb(var(--c-accent) / 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
}

.glass {
  background: rgb(var(--c-surface) / 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgb(var(--c-line) / 1);
}
.glass-strong {
  background: rgb(var(--c-surface) / 0.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgb(var(--c-line) / 1);
}

.lift {
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1.0),
              border-color 280ms ease, box-shadow 280ms ease, background-color 280ms ease;
}
.lift:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--c-accent) / 0.5);
  box-shadow: 0 24px 48px -24px rgb(var(--c-accent-glow) / 0.25);
}

.ops-card {
  background: linear-gradient(180deg, rgb(var(--c-surface) / 0.92) 0%, rgb(var(--c-surface-deep) / 0.92) 100%);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 1px 0 0 rgb(var(--c-accent) / 0.16) inset,
              0 24px 64px -24px rgb(var(--c-accent-glow) / 0.30),
              0 0 0 1px rgb(var(--c-line) / 1);
}
.ops-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgb(var(--c-accent) / 0.32), transparent 60%);
  z-index: -1;
  filter: blur(20px);
  opacity: 0.6;
}

.severity-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; position: relative;
}
.severity-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: currentColor; opacity: 0.4; animation: severity-pulse 2.2s ease-out infinite;
}
.severity-dot.s-info    { color: rgb(var(--c-accent) / 1); background: currentColor; }
.severity-dot.s-success { color: rgb(var(--c-success) / 1); background: currentColor; }
.severity-dot.s-warn    { color: rgb(var(--c-warning) / 1); background: currentColor; }
.severity-dot.s-danger  { color: rgb(var(--c-danger) / 1); background: currentColor; }
@keyframes severity-pulse {
  0%   { transform: scale(0.6); opacity: 0.45; }
  100% { transform: scale(2.2); opacity: 0; }
}

.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--c-success) / 1);
  box-shadow: 0 0 0 0 rgb(var(--c-success) / 0.5);
  animation: live-blink 1.6s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--c-success) / 0.5); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--c-success) / 0); }
}

.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1.0),
              transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1.0);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.stat-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.u-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
}
.u-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1.0);
}
.u-link:hover::after { transform: scaleX(1); transform-origin: left; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  background: rgb(var(--c-accent) / 1);
  color: rgb(var(--c-bg) / 1);
  border-radius: 8px; font-weight: 600; font-size: 14px; letter-spacing: -0.005em;
  border: 1px solid rgb(var(--c-accent) / 1); cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 8px 24px -8px rgb(var(--c-accent) / 0.5);
}
.btn-primary:hover {
  background: rgb(var(--c-accent-soft) / 1);
  border-color: rgb(var(--c-accent-soft) / 1);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -10px rgb(var(--c-accent) / 0.6);
}
html[data-palette="kd-light"] .btn-primary { color: #FFFFFF; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; background: transparent; color: rgb(var(--c-text) / 1);
  border: 1px solid rgb(var(--c-line) / 1); border-radius: 8px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn-ghost:hover {
  background: rgb(var(--c-surface) / 0.7);
  border-color: rgb(var(--c-accent) / 0.5);
  color: rgb(var(--c-text-strong) / 1);
}

.site-header {
  background: rgb(var(--c-bg) / 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgb(var(--c-line) / 1);
}

/* ==========================================================================
   Appearance control - light/dark toggle + dark accent picker
   ========================================================================== */
#kd-appearance {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: rgb(var(--c-surface) / 0.9);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgb(var(--c-line) / 1);
  border-radius: 999px;
  box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.55);
  font-family: 'Inter', system-ui, sans-serif;
  user-select: none;
}
html[data-palette="kd-light"] #kd-appearance {
  box-shadow: 0 12px 40px -16px rgba(12, 30, 51, 0.18);
}

/* Mode toggle (sun/moon) */
#kd-appearance .kd-mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 54px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgb(var(--c-line) / 1);
  background: rgb(var(--c-surface-deep) / 1);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 200ms ease, border-color 200ms ease;
}
#kd-appearance .kd-mode .kd-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgb(var(--c-accent) / 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--c-bg) / 1);
  transition: transform 280ms cubic-bezier(0.4, 0.0, 0.2, 1.0), background-color 200ms ease;
}
html[data-palette="kd-light"] #kd-appearance .kd-mode .kd-knob {
  transform: translateX(26px);
}
#kd-appearance .kd-mode .material-symbols-outlined {
  font-size: 14px;
  visibility: visible !important;
}
#kd-appearance .kd-mode .kd-ico-sun  { display: none; }
#kd-appearance .kd-mode .kd-ico-moon { display: inline; }
html[data-palette="kd-light"] #kd-appearance .kd-mode .kd-ico-sun  { display: inline; }
html[data-palette="kd-light"] #kd-appearance .kd-mode .kd-ico-moon { display: none; }

/* Divider + accent dots */
#kd-appearance .kd-acc-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  border-left: 1px solid rgb(var(--c-line) / 1);
  transition: opacity 220ms ease, filter 220ms ease;
}
html[data-palette="kd-light"] #kd-appearance .kd-acc-wrap {
  opacity: 0.35;
  filter: grayscale(0.6);
  pointer-events: none;
}
#kd-appearance .kd-acc {
  position: relative;
  width: 20px; height: 20px;
  padding: 0;
  border: 1px solid rgb(var(--c-line) / 1);
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#kd-appearance .kd-acc::before {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  background: var(--dot, #7DD3FC);
}
#kd-appearance .kd-acc:hover { transform: translateY(-1px); }
#kd-appearance .kd-acc.is-active {
  border-color: rgb(var(--c-accent) / 1);
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.4);
}
#kd-appearance .kd-acc[data-accent="glacier"] { --dot: #7DD3FC; }
#kd-appearance .kd-acc[data-accent="kd-dark"] { --dot: #38BDF8; }

#kd-appearance .kd-acc[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgb(var(--c-bg) / 0.96);
  color: rgb(var(--c-text) / 1);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  border-radius: 4px; border: 1px solid rgb(var(--c-line) / 1);
  opacity: 0; pointer-events: none; transition: opacity 160ms ease 60ms;
}
#kd-appearance .kd-acc:hover[data-tip]::after { opacity: 1; }

@media (max-width: 640px) {
  #kd-appearance { bottom: 14px; right: 14px; padding: 6px 8px; }
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  .mesh-hero { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}