:root {
  /* ── Backgrounds ── */
  --bg-0: #07070e;
  --bg-1: #0c0c18;
  --bg-2: #10101f;
  --bg-card: rgba(255, 255, 255, 0.028);
  --bg-card-hover: rgba(0, 212, 255, 0.05);

  /* ── Accent Colors ── */
  --cyan: #00d4ff;
  --cyan-dim: rgba(0, 212, 255, 0.15);
  --cyan-glow: rgba(0, 212, 255, 0.45);
  --purple: #7b2fff;
  --purple-dim: rgba(123, 47, 255, 0.15);
  --purple-glow: rgba(123, 47, 255, 0.45);
  --magenta: #ff2d78;

  /* ── Text ── */
  --text-primary: #e0e0f0;
  --text-secondary: #8080a0;
  --text-muted: #50506a;

  /* ── Borders ── */
  --border: 1px solid rgba(0, 212, 255, 0.12);
  --border-hover: 1px solid rgba(0, 212, 255, 0.55);
  --border-subtle: 1px solid rgba(255, 255, 255, 0.06);

  /* ── Shadows / Glows ── */
  --glow-cyan: 0 0 30px rgba(0, 212, 255, 0.35), 0 0 60px rgba(0, 212, 255, 0.15);
  --glow-card: 0 8px 40px rgba(0, 0, 0, 0.65);
  --glow-text: 0 0 12px rgba(0, 212, 255, 0.7);

  /* ── Typography ── */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Noto Sans SC', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Motion ── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-med: 380ms;
  --dur-slow: 700ms;

  /* ── Layout ── */
  --max-w: 1300px;
  --gap: 20px;
  --radius: 12px;
  --radius-sm: 6px;

  /* ── Nav height ── */
  --nav-h: 68px;
}

/* ─── Cloud Sea warm cartoon theme ──────────────────────── */
body[data-bg="cloudSea"] {
  --cyan:            #e87340;
  --cyan-dim:        rgba(232, 115, 64, 0.12);
  --cyan-glow:       rgba(232, 115, 64, 0.45);
  --purple:          #7ab8d4;
  --purple-dim:      rgba(122, 184, 212, 0.15);
  --purple-glow:     rgba(122, 184, 212, 0.45);
  --bg-0:            #120a06;
  --bg-1:            #1c1009;
  --bg-2:            #26150c;
  --bg-card:         rgba(255, 190, 110, 0.04);
  --bg-card-hover:   rgba(232, 115, 64, 0.07);
  --text-primary:    #f0e0d0;
  --text-secondary:  #c09278;
  --text-muted:      #7a5840;
  --border:          1px solid rgba(232, 115, 64, 0.18);
  --border-hover:    1px solid rgba(232, 115, 64, 0.55);
  --border-subtle:   1px solid rgba(255, 220, 180, 0.06);
  --glow-cyan:       0 0 30px rgba(232, 115, 64, 0.35), 0 0 60px rgba(232, 115, 64, 0.15);
  --glow-card:       0 8px 40px rgba(0, 0, 0, 0.65);
  --glow-text:       0 0 12px rgba(232, 115, 64, 0.7);
}

/* Override hardcoded cyan rgba values in layout.css */
body[data-bg="cloudSea"] .hero-name-en {
  color: #ffe8cc !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.75), 0 0 40px rgba(232, 115, 64, 0.35) !important;
}
body[data-bg="cloudSea"] .hero-name-zh {
  color: rgba(255, 225, 190, 0.92) !important;
  text-shadow: 0 0 28px rgba(232, 115, 64, 0.5), 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}
body[data-bg="cloudSea"] .hero-subtitle {
  color: rgba(255, 205, 160, 0.90) !important;
  text-shadow: 0 0 16px rgba(232, 115, 64, 0.35) !important;
}
body[data-bg="cloudSea"] .hero-tag {
  color: #e87340 !important;
  border-color: rgba(232, 115, 64, 0.55) !important;
  background: rgba(232, 115, 64, 0.10) !important;
  box-shadow: 0 0 14px rgba(232, 115, 64, 0.22) !important;
}
body[data-bg="cloudSea"] .hero-cta {
  background: linear-gradient(135deg, rgba(232,115,64,0.28) 0%, rgba(122,184,212,0.20) 100%) !important;
  border-color: rgba(232, 115, 64, 0.75) !important;
  box-shadow: 0 0 20px rgba(232, 115, 64, 0.25), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
body[data-bg="cloudSea"] .hero-cta:hover {
  background: linear-gradient(135deg, rgba(232,115,64,0.42) 0%, rgba(122,184,212,0.32) 100%) !important;
  box-shadow: var(--glow-cyan), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
body[data-bg="cloudSea"] .skill-tag {
  border-color: rgba(232, 115, 64, 0.35) !important;
  color: #d4a07a !important;
}
body[data-bg="cloudSea"] .skill-tag:hover {
  border-color: #e87340 !important;
  color: #e87340 !important;
  background: rgba(232, 115, 64, 0.14) !important;
}
body[data-bg="cloudSea"] .skill-tag--highlight {
  border-color: rgba(232, 115, 64, 0.65) !important;
  background:   rgba(232, 115, 64, 0.14) !important;
  box-shadow:   0 0 12px rgba(232, 115, 64, 0.25) !important;
  color: #e87340 !important;
}
body[data-bg="cloudSea"] #nav {
  background:         rgba(20, 10, 5, 0.75) !important;
  border-bottom-color: rgba(232, 115, 64, 0.15) !important;
  box-shadow: 0 1px 0 rgba(232, 115, 64, 0.12), 0 4px 20px rgba(0,0,0,0.35) !important;
}
body[data-bg="cloudSea"] #nav.scrolled {
  box-shadow: 0 1px 0 rgba(232, 115, 64, 0.18), 0 4px 24px rgba(0,0,0,0.5) !important;
}

/* ── Portfolio card shadows ── */
body[data-bg="cloudSea"] .portfolio-card:hover {
  box-shadow:
    0 0 18px 4px rgba(232, 115, 64, 0.28),
    0 20px 50px rgba(0, 0, 0, 0.45) !important;
}
body[data-bg="cloudSea"] .card__mosaic-badge {
  border-color: rgba(232, 115, 64, 0.40) !important;
}
body[data-bg="cloudSea"] .tag--category {
  border-color: rgba(232, 115, 64, 0.30) !important;
}
body[data-bg="cloudSea"] .card__link-btn {
  border-color: rgba(232, 115, 64, 0.35) !important;
}
body[data-bg="cloudSea"] .card__link-btn:hover {
  background: rgba(232, 115, 64, 0.18) !important;
  box-shadow: 0 0 12px rgba(232, 115, 64, 0.35) !important;
}
body[data-bg="cloudSea"] .card__live-btn {
  box-shadow: 0 0 14px rgba(232, 115, 64, 0.65) !important;
}
body[data-bg="cloudSea"] .card__live-btn:hover {
  box-shadow: 0 0 24px rgba(232, 115, 64, 1.0) !important;
}
body[data-bg="cloudSea"] .play-icon {
  background: rgba(232, 115, 64, 0.18) !important;
  border-color: rgba(232, 115, 64, 0.65) !important;
}
body[data-bg="cloudSea"] .portfolio-card:hover .play-icon {
  background: rgba(232, 115, 64, 0.32) !important;
}