/* HodorCloud semantic theme tokens — paired with Tailwind rgb(var(--hc-*) / alpha) colors */

.dark,
:root:not(.light) {
  --hc-surface-tint: 182 200 228;
  --hc-on-secondary-fixed: 0 30 47;
  --hc-surface-container: 23 31 51;
  --hc-primary-fixed-dim: 182 200 228;
  --hc-error: 255 180 171;
  --hc-on-primary-fixed-variant: 55 72 95;
  --hc-secondary: 154 204 243;
  --hc-surface-bright: 49 57 77;
  --hc-tertiary: 184 200 224;
  --hc-on-primary: 32 49 72;
  --hc-outline-variant: 68 71 77;
  --hc-on-error-container: 255 218 214;
  --hc-tertiary-container: 44 59 78;
  --hc-tertiary-fixed-dim: 184 200 224;
  --hc-outline: 142 145 151;
  --hc-on-primary-container: 148 165 193;
  --hc-on-surface: 218 226 253;
  --hc-surface: 11 19 38;
  --hc-primary-fixed: 211 227 255;
  --hc-tertiary-fixed: 212 228 252;
  --hc-background: 11 19 38;
  --hc-on-tertiary-container: 150 165 188;
  --hc-secondary-fixed-dim: 154 204 243;
  --hc-error-container: 147 0 10;
  --hc-surface-container-lowest: 6 14 32;
  --hc-on-surface-variant: 196 198 205;
  --hc-on-tertiary: 34 49 68;
  --hc-on-tertiary-fixed-variant: 57 72 92;
  --hc-primary: 182 200 228;
  --hc-secondary-container: 12 75 108;
  --hc-primary-container: 42 59 82;
  --hc-inverse-on-surface: 40 48 68;
  --hc-secondary-fixed: 201 230 255;
  --hc-on-tertiary-fixed: 13 28 46;
  --hc-inverse-primary: 78 95 120;
  --hc-on-secondary: 0 52 77;
  --hc-surface-dim: 11 19 38;
  --hc-inverse-surface: 218 226 253;
  --hc-surface-variant: 45 52 73;
  --hc-on-background: 218 226 253;
  --hc-on-primary-fixed: 9 28 50;
  --hc-on-secondary-container: 136 187 225;
  --hc-surface-container-high: 34 42 61;
  --hc-on-error: 105 0 5;
  --hc-on-secondary-fixed-variant: 12 75 108;
  --hc-surface-container-low: 19 27 46;
  --hc-surface-container-highest: 45 52 73;
}

.light {
  --hc-surface-tint: 78 95 120;
  --hc-on-secondary-fixed: 0 30 47;
  --hc-surface-container: 241 245 249;
  --hc-primary-fixed-dim: 182 200 228;
  --hc-error: 186 26 26;
  --hc-on-primary-fixed-variant: 55 72 95;
  --hc-secondary: 12 100 140;
  --hc-surface-bright: 255 255 255;
  --hc-tertiary: 100 116 139;
  --hc-on-primary: 255 255 255;
  --hc-outline-variant: 203 213 225;
  --hc-on-error-container: 127 29 29;
  --hc-tertiary-container: 226 232 240;
  --hc-tertiary-fixed-dim: 184 200 224;
  --hc-outline: 148 163 184;
  --hc-on-primary-container: 55 71 90;
  --hc-on-surface: 30 41 59;
  --hc-surface: 255 255 255;
  --hc-primary-fixed: 211 227 255;
  --hc-tertiary-fixed: 212 228 252;
  --hc-background: 240 244 248;
  --hc-on-tertiary-container: 71 85 105;
  --hc-secondary-fixed-dim: 154 204 243;
  --hc-error-container: 254 226 226;
  --hc-surface-container-lowest: 255 255 255;
  --hc-on-surface-variant: 71 85 105;
  --hc-on-tertiary: 255 255 255;
  --hc-on-tertiary-fixed-variant: 57 72 92;
  --hc-primary: 78 95 120;
  --hc-secondary-container: 201 230 255;
  --hc-primary-container: 211 227 255;
  --hc-inverse-on-surface: 218 226 253;
  --hc-secondary-fixed: 201 230 255;
  --hc-on-tertiary-fixed: 13 28 46;
  --hc-inverse-primary: 182 200 228;
  --hc-on-secondary: 255 255 255;
  --hc-surface-dim: 241 245 249;
  --hc-inverse-surface: 30 41 59;
  --hc-surface-variant: 226 232 240;
  --hc-on-background: 30 41 59;
  --hc-on-primary-fixed: 9 28 50;
  --hc-on-secondary-container: 12 74 110;
  --hc-surface-container-high: 226 232 240;
  --hc-on-error: 255 255 255;
  --hc-on-secondary-fixed-variant: 12 75 108;
  --hc-surface-container-low: 248 250 252;
  --hc-surface-container-highest: 203 213 225;
}

html {
  color-scheme: dark;
}

html.light {
  color-scheme: light;
}

#theme-toggle .theme-icon-light.hidden,
#theme-toggle .theme-icon-dark.hidden {
  display: none;
}

/* Top navigation — uniform size; active state is color only */
#site-nav a {
  letter-spacing: normal;
  text-decoration: none;
}

#site-nav .site-nav-menu .site-nav-link {
  font-weight: 600;
  border-bottom: none;
}

#site-nav .site-nav-logo img {
  display: block;
  max-height: 2.5rem;
  width: auto;
}

.light .tech-grid {
  background-image: linear-gradient(to right, rgba(148, 163, 184, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.15) 1px, transparent 1px);
}

.light .tech-loom-grid {
  background-image: linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
  opacity: 0.12;
}

/* Card / panel stone texture — theme-aware (replaces per-page dark-only inline rules) */
.dark .stone-gradient,
:root:not(.light) .stone-gradient {
  background: linear-gradient(
    180deg,
    rgb(var(--hc-surface-container-high) / 0.55) 0%,
    rgb(var(--hc-surface-container-lowest) / 0.9) 100%
  );
}

.light .stone-gradient {
  background: linear-gradient(
    180deg,
    rgb(var(--hc-surface) / 1) 0%,
    rgb(var(--hc-surface-container-low) / 1) 100%
  );
}

/* Global regions visual — layered image + scrim (home) */
.regions-visual {
  isolation: isolate;
}

.dark .regions-visual-img,
:root:not(.light) .regions-visual-img {
  filter: brightness(0.85) saturate(1.05) contrast(1.04);
}

.dark .regions-visual-scrim,
:root:not(.light) .regions-visual-scrim {
  background: linear-gradient(
    135deg,
    rgb(var(--hc-background) / 0.42) 0%,
    rgb(var(--hc-primary) / 0.14) 48%,
    rgb(var(--hc-background) / 0.5) 100%
  );
}

.dark .regions-visual-vignette,
:root:not(.light) .regions-visual-vignette {
  background: radial-gradient(
    ellipse 85% 85% at 50% 50%,
    transparent 35%,
    rgb(var(--hc-background) / 0.45) 100%
  );
}

.dark .regions-visual-grid,
:root:not(.light) .regions-visual-grid {
  opacity: 0.16;
}

.light .regions-visual-img {
  filter: brightness(0.97) saturate(1.12) contrast(1.02);
}

.light .regions-visual-scrim {
  background: linear-gradient(
    135deg,
    rgb(var(--hc-primary) / 0.1) 0%,
    transparent 50%,
    rgb(var(--hc-surface-container) / 0.28) 100%
  );
}

.light .regions-visual-vignette {
  background: radial-gradient(
    ellipse 85% 85% at 50% 50%,
    transparent 45%,
    rgb(var(--hc-surface-container-high) / 0.35) 100%
  );
}

.light .regions-visual-grid {
  opacity: 0.1;
}

/* Hero banner — theme-aware scrims (home #hero-banner) */
.dark #hero-banner .hero-banner-scrim,
:root:not(.light) #hero-banner .hero-banner-scrim {
  background: rgb(var(--hc-background) / 0.55);
}

.dark #hero-banner .hero-banner-fade,
:root:not(.light) #hero-banner .hero-banner-fade {
  background: linear-gradient(
    to bottom,
    rgb(var(--hc-background) / 0.4),
    transparent 50%,
    rgb(var(--hc-background) / 1)
  );
}

.dark #hero-banner .hero-banner-grid,
:root:not(.light) #hero-banner .hero-banner-grid {
  opacity: 0.2;
}

.light #hero-banner .hero-banner-bg {
  opacity: 1;
  filter: brightness(1.06) saturate(0.9) contrast(1.02);
}

/* Center-outward scrim — even diffusion from banner middle */
.light #hero-banner .hero-banner-scrim {
  background: radial-gradient(
    ellipse 110% 92% at 50% 48%,
    rgb(var(--hc-surface) / 0.48) 0%,
    rgb(var(--hc-surface) / 0.31) 36%,
    rgb(var(--hc-surface) / 0.28) 58%,
    transparent 78%
  );
}

/* Bottom edge only — blend into page, not the main scrim */
.light #hero-banner .hero-banner-fade {
  background: linear-gradient(
    to bottom,
    transparent 84%,
    rgb(var(--hc-background) / 0.22) 94%,
    rgb(var(--hc-background) / 0.55) 100%
  );
}

.light #hero-banner .hero-banner-grid {
  opacity: 0.08;
}

.light #hero-banner .hero-banner-content {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.light #hero-banner .hero-banner-badge {
  background: rgb(var(--hc-surface) / 0.45);
  border-color: rgb(0 0 0 / 0.12);
  color: #000;
}

.light #hero-banner .hero-banner-badge .text-primary {
  color: #000;
}

.light #hero-banner .hero-banner-content h1,
.light #hero-banner .hero-banner-content h1 .text-primary {
  color: #000;
  text-shadow: none;
}

.light #hero-banner .hero-banner-content p {
  color: rgb(0 0 0 / 0.72);
  text-shadow: none;
}

.light #hero-banner .hero-banner-content a.border-2 {
  color: #000;
  background: rgb(var(--hc-surface) / 0.55);
  border-color: rgb(0 0 0 / 0.2);
}

.light #hero-banner .hero-banner-content a.border-2:hover {
  background: rgb(var(--hc-surface) / 0.75);
}

/* Security page hero — lighter scrims than legacy bg-surface/60 stack */
.dark #security-hero .security-hero-scrim,
:root:not(.light) #security-hero .security-hero-scrim {
  background: radial-gradient(
    ellipse 110% 92% at 50% 48%,
    rgb(var(--hc-background) / 0.38) 0%,
    rgb(var(--hc-background) / 0.2) 40%,
    transparent 78%
  );
}

.dark #security-hero .security-hero-fade,
:root:not(.light) #security-hero .security-hero-fade {
  background: radial-gradient(
    ellipse 110% 92% at 50% 48%,
    rgb(var(--hc-background) / 0.35) 0%,
    rgb(var(--hc-background) / 0.18) 36%,
    rgb(var(--hc-background) / 0.08) 58%,
    transparent 78%
  );
}

.dark #security-hero .security-hero-bottom-fade,
:root:not(.light) #security-hero .security-hero-bottom-fade {
  background: linear-gradient(to top, rgb(var(--hc-background) / 0.55), transparent);
}

.dark #security-hero .security-hero-grid,
:root:not(.light) #security-hero .security-hero-grid {
  opacity: 0.14;
}

.light #security-hero .security-hero-bg {
  filter: brightness(1.04) saturate(0.92) contrast(1.02);
}

.light #security-hero .security-hero-scrim {
  background: radial-gradient(
    ellipse 110% 92% at 50% 48%,
    rgb(var(--hc-surface) / 0.3) 0%,
    rgb(var(--hc-surface) / 0.14) 40%,
    transparent 78%
  );
}

.light #security-hero .security-hero-fade {
  background: radial-gradient(
    ellipse 110% 92% at 50% 58%,
    rgb(var(--hc-background) / 0.38) 0%,
    rgb(var(--hc-background) / 0.18) 36%,
    rgb(var(--hc-background) / 0.08) 58%,
    transparent 78%
  );
}

.light #security-hero .security-hero-bottom-fade {
  background: linear-gradient(to top, rgb(var(--hc-background) / 0.35), transparent);
}

.light #security-hero .security-hero-grid {
  opacity: 0.08;
}