/* ===================================================================
   CyberApps — Shared theme tokens & utilities
   Used by index.html, contact.html
   Page-specific styling stays in respective <style> blocks.
   =================================================================== */

/* === LIGHT THEME (default) === */
:root {
  /* Backgrounds */
  --bg-primary: #F4F5FF;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F4F5FF;

  /* Foreground */
  --fg-primary: #0B0C17;
  --fg-muted: rgba(11, 12, 23, 0.70);
  --fg-dim: rgba(11, 12, 23, 0.62);

  /* Borders */
  --border-subtle: rgba(11, 12, 23, 0.08);
  --border-hover: rgba(11, 12, 23, 0.18);
  --border-divider: rgba(11, 12, 23, 0.08);
  --footer-border: rgba(11, 12, 23, 0.12);

  /* Accents */
  --accent-blue: #00B4E0;
  --accent-violet: #7C3EDB;
  --accent-grad: linear-gradient(95deg, #00B4E0 0%, #7C3EDB 100%);

  /* Header / mobile menu transparency */
  --header-alpha: 80%;
  --mobile-menu-alpha: 95%;

  /* Buttons */
  --btn-primary-fg: #FFFFFF;
  --btn-primary-shadow: 0 4px 16px -4px rgba(0,180,224,0.35), 0 8px 32px -8px rgba(124,62,219,0.25);
  --btn-primary-shadow-hover: 0 6px 20px -4px rgba(0,180,224,0.45), 0 12px 40px -8px rgba(124,62,219,0.35);
  --btn-ghost-hover-border: rgba(11,12,23,0.32);
  --btn-ghost-hover-bg: rgba(11,12,23,0.04);

  /* Cards */
  --card-bg: #FFFFFF;
  --card-bg-hover: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(11,12,23,0.04);
  --card-shadow-hover: 0 8px 24px -6px rgba(11,12,23,0.08);
  --card-border-hover: rgba(11,12,23,0.16);

  /* Step btn (index only — defined here, harmless if unused) */
  --step-bg: #FFFFFF;
  --step-active-bg: #FFFFFF;

  /* Hero (index only — defined here, harmless if unused) */
  --grid-line: rgba(11,12,23,0.03);
  --mark-node-1: #A8DEEC;
  --mark-node-2: #3FB8D8;
  --mark-node-3: #1F5566;
  --mark-hub-1: #C6E8F2;
  --mark-hub-2: #3FB8D8;
  --mark-hub-3: #1A4655;
  --mark-line: #3FB8D8;
  --mark-line-opacity: 0.18;
  --mark-pulse: #3FB8D8;
  --canvas-line-rgb: 0, 180, 224;
  --canvas-pulse-rgb: 0, 180, 224;
  --canvas-pulse-alpha-base: 0.30;
  --canvas-pulse-alpha-range: 0.30;
  --canvas-line-alpha-mult: 0.22;
  --canvas-opacity: 0.7;
  --ambient-blue: rgba(0,180,224,0.08);
  --ambient-violet: rgba(124,62,219,0.10);
  --cta-bg-1: #FFFFFF;
  --cta-bg-2: #F4F5FF;
  --faq-hover-bg: rgba(11,12,23,0.03);

  /* Forms (contact only — defined here, harmless if unused) */
  --input-bg: #FFFFFF;
  --input-bg-focus: #FFFFFF;
  --input-border: rgba(11, 12, 23, 0.12);
  --checkbox-bg: #FFFFFF;
  --error-fg: #C8304B;
}

/* === DARK THEME (overrides) === */
[data-theme="dark"] {
  --bg-primary: #07070F;
  --bg-surface: #0B0C17;
  --bg-elevated: #0B0C17;

  --fg-primary: #EDEEFF;
  --fg-muted: rgba(200,210,255,0.74);
  --fg-dim: rgba(200,210,255,0.62);

  --border-subtle: rgba(200,210,255,0.08);
  --border-hover: rgba(200,210,255,0.18);
  --border-divider: rgba(255,255,255,0.06);
  --footer-border: rgba(255,255,255,0.06);

  --accent-blue: #00CFFF;
  --accent-violet: #9455FF;
  --accent-grad: linear-gradient(95deg, #00CFFF 0%, #9455FF 100%);

  --header-alpha: 70%;
  --mobile-menu-alpha: 95%;

  --btn-primary-fg: #07070F;
  --btn-primary-shadow: 0 0 40px -10px rgba(0,207,255,0.45), 0 0 80px -30px rgba(148,85,255,0.35);
  --btn-primary-shadow-hover: 0 0 50px -8px rgba(0,207,255,0.55), 0 0 100px -25px rgba(148,85,255,0.45);
  --btn-ghost-hover-border: rgba(200,210,255,0.32);
  --btn-ghost-hover-bg: rgba(200,210,255,0.04);

  --card-bg: rgba(11,12,23,0.6);
  --card-bg-hover: rgba(11,12,23,0.75);
  --card-shadow: none;
  --card-shadow-hover: none;
  --card-border-hover: rgba(200,210,255,0.18);

  --step-bg: rgba(11,12,23,0.4);
  --step-active-bg: #0B0C17;

  --grid-line: rgba(200,210,255,0.04);
  --mark-node-1: #A8ECFF;
  --mark-node-2: #00CFFF;
  --mark-node-3: #0088AA;
  --mark-hub-1: #A8ECFF;
  --mark-hub-2: #00CFFF;
  --mark-hub-3: #0066AA;
  --mark-line: #00CFFF;
  --mark-line-opacity: 0.2;
  --mark-pulse: #FFFFFF;
  --canvas-line-rgb: 0, 207, 255;
  --canvas-pulse-rgb: 148, 85, 255;
  --canvas-pulse-alpha-base: 0.36;
  --canvas-pulse-alpha-range: 0.36;
  --canvas-line-alpha-mult: 0.20;
  --canvas-opacity: 0.80;
  --ambient-blue: rgba(0,207,255,0.18);
  --ambient-violet: rgba(148,85,255,0.22);
  --cta-bg-1: rgba(11,12,23,0.4);
  --cta-bg-2: rgba(11,12,23,0.8);
  --faq-hover-bg: transparent;

  --input-bg: rgba(11, 12, 23, 0.5);
  --input-bg-focus: rgba(11, 12, 23, 0.8);
  --input-border: rgba(200, 210, 255, 0.08);
  --checkbox-bg: rgba(11, 12, 23, 0.6);
  --error-fg: #FF6B8A;
}

/* === BASE === */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 88px; }
html, body {
  transition: background-color 220ms ease-out, color 220ms ease-out;
}
body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: 'Geist', 'Space Grotesk', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === EYEBROW === */
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.38em;
  text-transform: uppercase; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent-blue);
  box-shadow: 0 0 12px var(--accent-blue);
}

/* === GRADIENT TEXT === */
.grad-text {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* === BUTTONS === */
.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 500; font-size: 15px;
  color: var(--btn-primary-fg);
  background: var(--accent-grad);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: var(--btn-primary-shadow);
  transition: background-position 300ms ease, transform 200ms ease, box-shadow 300ms ease, color 220ms ease-out;
  cursor: pointer; border: 0;
}
.btn-primary:hover:not(:disabled) { background-position: 100% 50%; box-shadow: var(--btn-primary-shadow-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn-primary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 500; font-size: 15px;
  color: var(--fg-primary);
  border: 1px solid var(--border-hover);
  background: transparent;
  transition: border-color 200ms ease, background 200ms ease, color 220ms ease-out;
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--btn-ghost-hover-border); background: var(--btn-ghost-hover-bg); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }

/* === CARD (core; pages may extend with :hover) === */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  transition: border-color 220ms ease-out, transform 220ms ease-out, background-color 220ms ease-out, box-shadow 220ms ease-out;
}

/* === FOCUS RINGS === */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px;
}

/* === HEADER + MOBILE MENU === */
.site-header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(12px);
  background-color: color-mix(in srgb, var(--bg-primary) var(--header-alpha), transparent);
  border-bottom: 1px solid var(--border-divider);
  transition: background-color 220ms ease-out, border-color 220ms ease-out;
}
.mobile-menu-bg {
  backdrop-filter: blur(12px);
  background-color: color-mix(in srgb, var(--bg-primary) var(--mobile-menu-alpha), transparent);
  border-top: 1px solid var(--border-divider);
}
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }

/* === NAVIGATION LINKS === */
.nav-link { color: var(--fg-muted); transition: color 220ms ease-out; }
.nav-link:hover { color: var(--fg-primary); }
.nav-link-active { color: var(--fg-primary); }

/* === FOOTER === */
.footer-bg {
  background: var(--bg-elevated);
  border-top: 1px solid var(--footer-border);
  transition: background-color 220ms ease-out, border-color 220ms ease-out;
}

/* === LOGO DUAL-IMAGE SWAP === */
.logo-light { display: block; }
.logo-dark  { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }

/* === LOGO SIZING — Brand hierarchy: header dominant, footer modest === */
.site-header > nav > a:first-child {
  flex-shrink: 0;  /* prevent shrink in flex nav (locale-agnostic) */
}

.site-header .logo-light,
.site-header .logo-dark {
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

.footer-bg .logo-light,
.footer-bg .logo-dark {
  height: 40px;
  width: auto;
}

/* === ACTIVE INLINE LINK === */
.link-active {
  color: var(--fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 220ms ease-out, color 220ms ease-out;
}
.link-active:hover {
  text-decoration-color: var(--accent-violet);
}

/* === DIVIDERS === */
.section-divider { border-top: 1px solid var(--border-divider); }

/* === BRANDED TAGS / ICONS === */
.tag-live-blue {
  border: 1px solid color-mix(in srgb, var(--accent-blue) 35%, transparent);
  color: var(--accent-blue);
}
.tag-live-violet {
  border: 1px solid color-mix(in srgb, var(--accent-violet) 40%, transparent);
  color: var(--accent-violet);
}
.icon-tile {
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--fg-primary) 4%, transparent);
}
.icon-stroke-blue { stroke: var(--accent-blue); }
.icon-stroke-violet { stroke: var(--accent-violet); }

/* === HERO MARK SVG GRADIENT STOPS (index only; harmless on others) === */
.mark-stop-node-1 { stop-color: var(--mark-node-1); }
.mark-stop-node-2 { stop-color: var(--mark-node-2); }
.mark-stop-node-3 { stop-color: var(--mark-node-3); }
.mark-stop-hub-1  { stop-color: var(--mark-hub-1); }
.mark-stop-hub-2  { stop-color: var(--mark-hub-2); }
.mark-stop-hub-3  { stop-color: var(--mark-hub-3); }
.hero-lines { stroke: var(--mark-line); stroke-opacity: var(--mark-line-opacity); }
.hero-pulse { fill: var(--mark-pulse); }

/* ============================================
   NAVBAR UTILITY CLUSTER (Gate 2)
   ============================================ */

.nav-utility {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================
   LANGUAGE DROPDOWN (Gate 2.5)
   ============================================ */

.lang-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1;
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.lang-trigger:hover {
  border-color: var(--border-subtle);
  background-color: color-mix(in srgb, var(--fg-primary) 4%, transparent);
}
.lang-trigger:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.lang-trigger[aria-expanded="true"] {
  border-color: var(--border-hover);
  background-color: color-mix(in srgb, var(--fg-primary) 5%, transparent);
}
.lang-trigger-code { font-weight: 600; letter-spacing: 0.04em; }
.lang-trigger-name {
  color: var(--fg-muted);
  font-weight: 500;
  display: none;  /* hidden in trigger; visible in panel options */
}
.lang-chevron {
  width: 12px; height: 12px;
  color: var(--fg-muted);
  transition: transform 220ms ease-out, color 180ms ease-out;
  margin-left: 2px;
}
.lang-trigger[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
  color: var(--fg-primary);
}

/* Panel — hidden by default, fade + slide on open */
.lang-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow:
    0 4px 8px -2px rgba(0,0,0,0.06),
    0 16px 32px -8px rgba(0,0,0,0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 220ms ease-out,
    visibility 0ms linear 220ms,
    transform 220ms ease-out;
  z-index: 50;
}
[data-theme="dark"] .lang-panel {
  background-color: var(--bg-elevated);
  box-shadow:
    0 4px 8px -2px rgba(0,0,0,0.4),
    0 16px 32px -8px rgba(0,0,0,0.6);
}
.lang-dropdown.open .lang-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 220ms ease-out,
    visibility 0ms,
    transform 220ms ease-out;
}

.lang-option {
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--fg-primary);
  transition: background-color 140ms ease-out;
}
.lang-option:hover {
  background-color: color-mix(in srgb, var(--fg-primary) 5%, transparent);
}
.lang-option:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
  background-color: color-mix(in srgb, var(--fg-primary) 5%, transparent);
}
.lang-option-code {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--fg-muted);
}
.lang-option[aria-selected="true"] .lang-option-code {
  color: var(--accent-blue);
}
.lang-option-name {
  color: var(--fg-primary);
  font-weight: 500;
}
.lang-check {
  width: 14px; height: 14px;
  color: var(--accent-blue);
  opacity: 0;
  transition: opacity 140ms ease-out;
  justify-self: end;
}
.lang-option[aria-selected="true"] .lang-check {
  opacity: 1;
}

/* Mobile language list (in mobile menu overlay) */
.lang-list-mobile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.lang-item-mobile {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--fg-primary);
  transition: background-color 140ms ease-out;
}
.lang-item-mobile:hover {
  background-color: color-mix(in srgb, var(--fg-primary) 4%, transparent);
}
.lang-item-mobile[aria-pressed="true"] {
  background-color: color-mix(in srgb, var(--accent-blue) 8%, transparent);
}
.lang-item-mobile[aria-pressed="true"] .lang-item-code {
  color: var(--accent-blue);
}
.lang-item-mobile:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.lang-item-code {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--fg-muted);
}
.lang-item-name { font-weight: 500; }

/* Theme toggle button */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
  padding: 0;
}
.theme-toggle:hover {
  border-color: var(--border-hover);
  background-color: color-mix(in srgb, var(--fg-primary) 4%, transparent);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 16px;
  height: 16px;
  color: var(--fg-primary);
  position: absolute;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.8); }
[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.8); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* Vertical divider between cluster and CTA (index only) */
.nav-divider {
  width: 1px;
  height: 20px;
  background-color: var(--border-subtle);
  flex-shrink: 0;
}

/* Mobile menu utility */
.mobile-menu-utility {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
}
@media (min-width: 768px) {
  .mobile-menu-utility { display: none; }
}
.mobile-menu-utility .theme-toggle {
  width: 40px;
  height: 40px;
}
.mobile-menu-utility .lang-btn {
  padding: 8px 12px;
  font-size: 14px;
}

/* === SKIP LINK === */
.skip-link {
  position: absolute; left: 12px; top: 12px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--bg-surface); color: var(--fg-primary);
  border: 1px solid var(--border-subtle);
  transform: translateY(-200%); transition: transform 180ms ease;
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); }

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}