/* ==================================================================
   Bramwin IT Solutions, "Kinetic Infrastructure" theme tokens.
   Light palette (default) + Dark palette (html.dark).
   Values are RGB triplets consumed by the Tailwind color tokens,
   which compile to `rgb(var(--<token>) / <alpha-value>)`.
   ================================================================== */

:root {
  --inverse-surface: 33 49 69;
  --inverse-primary: 0 218 243;
  --on-background: 11 28 48;
  --on-secondary-container: 85 99 125;
  --on-surface-variant: 59 73 76;
  --outline-variant: 186 201 204;
  --primary-fixed: 156 240 255;
  --error-container: 255 218 214;
  --surface-container: 229 238 255;
  --tertiary-container: 206 209 211;
  --on-error: 255 255 255;
  --on-primary: 255 255 255;
  --surface-container-lowest: 255 255 255;
  --error: 186 26 26;
  --tertiary-fixed: 224 227 229;
  --on-tertiary-fixed-variant: 68 71 73;
  --surface-tint: 0 104 117;
  --outline: 107 122 125;
  --surface: 248 249 255;
  --surface-dim: 203 219 245;
  --surface-variant: 211 228 254;
  --on-secondary: 255 255 255;
  --on-secondary-fixed: 13 28 50;
  --surface-container-high: 220 233 255;
  --primary: 0 104 117;
  --secondary: 81 95 120;
  --primary-fixed-dim: 0 218 243;
  --surface-container-low: 239 244 255;
  --on-tertiary: 255 255 255;
  --primary-container: 0 229 255;
  --on-tertiary-fixed: 25 28 30;
  --tertiary-fixed-dim: 196 199 201;
  --on-error-container: 147 0 10;
  --on-surface: 11 28 48;
  --inverse-on-surface: 234 241 255;
  --on-primary-fixed: 0 31 36;
  --tertiary: 92 95 97;
  --surface-bright: 248 249 255;
  --secondary-fixed-dim: 185 199 228;
  --on-tertiary-container: 86 90 91;
  --surface-container-highest: 211 228 254;
  --secondary-container: 210 224 254;
  --on-primary-fixed-variant: 0 79 88;
  --secondary-fixed: 214 227 255;
  --on-secondary-fixed-variant: 57 71 95;
  --on-primary-container: 0 98 110;
  --background: 248 249 255;
  color-scheme: light;
}

.dark {
  --inverse-surface: 234 241 255;
  --inverse-primary: 0 104 117;
  --on-background: 226 232 252;
  --on-secondary-container: 214 227 255;
  --on-surface-variant: 196 204 211;
  --outline-variant: 66 78 86;
  --primary-fixed: 0 218 243;
  --error-container: 147 0 10;
  --surface-container: 24 35 53;
  --tertiary-container: 64 68 70;
  --on-error: 105 0 5;
  --on-primary: 2 33 40;
  --surface-container-lowest: 6 13 25;
  --error: 255 180 171;
  --tertiary-fixed: 199 202 204;
  --on-tertiary-fixed-variant: 64 68 70;
  --surface-tint: 0 218 243;
  --outline: 140 150 158;
  --surface: 11 22 38;
  --surface-dim: 8 15 28;
  --surface-variant: 40 56 76;
  --on-secondary: 39 52 72;
  --on-secondary-fixed: 26 39 59;
  --surface-container-high: 29 40 58;
  --primary: 0 218 243;
  --secondary: 186 199 226;
  --primary-fixed-dim: 0 104 117;
  --surface-container-low: 16 28 45;
  --on-tertiary: 45 49 50;
  --primary-container: 0 218 243;
  --on-tertiary-fixed: 38 41 43;
  --tertiary-fixed-dim: 170 173 175;
  --on-error-container: 255 218 214;
  --on-surface: 226 232 252;
  --inverse-on-surface: 11 28 48;
  --on-primary-fixed: 0 25 31;
  --tertiary: 199 202 204;
  --surface-bright: 30 47 68;
  --secondary-fixed-dim: 86 102 131;
  --on-tertiary-container: 224 227 229;
  --surface-container-highest: 34 45 64;
  --secondary-container: 60 73 94;
  --on-primary-fixed-variant: 2 33 40;
  --secondary-fixed: 186 199 226;
  --on-secondary-fixed-variant: 60 73 94;
  --on-primary-container: 156 240 255;
  --background: 9 16 29;
  color-scheme: dark;
}

/* Blueprint grid lines remain visible in dark mode */
.dark .blueprint-bg {
  background-image:
    linear-gradient(to right, rgba(226, 232, 252, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 252, 0.045) 1px, transparent 1px);
}

/* Brand "node" motif picks up the electric accent in dark mode */
.dark .node,
.dark .geo-node,
.dark .node-decorator::before {
  background-color: #00daf3;
}

/* Raw-CSS material cards follow the dark surface scale */
.dark .tech-card {
  background-color: rgb(var(--surface-container-lowest) / 1);
  border-color: rgb(var(--outline-variant) / 0.3);
}

/* Theme-aware form validation state */
.input-error {
  border-color: rgb(var(--error) / 1) !important;
  background-color: rgb(var(--error-container) / 1) !important;
}

/* Page-load entrance: subtle, staggered fade-in */
@keyframes entrance-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
main > section {
  animation: entrance-rise 0.55s ease-out both;
}
main > section:nth-of-type(2) { animation-delay: 0.08s; }
main > section:nth-of-type(3) { animation-delay: 0.16s; }
main > section:nth-of-type(4) { animation-delay: 0.24s; }
main > section:nth-of-type(5) { animation-delay: 0.32s; }
main > section:nth-of-type(6) { animation-delay: 0.40s; }
main > section:nth-of-type(7) { animation-delay: 0.48s; }
main > section:nth-of-type(8) { animation-delay: 0.56s; }
main > section:nth-of-type(9) { animation-delay: 0.64s; }
.tech-card {
  animation: entrance-rise 0.5s ease-out 0.15s both;
}
@media (prefers-reduced-motion: reduce) {
  main > section,
  .tech-card {
    animation: none;
  }
}