/* Tokyo — neon metropolis (coherent dark skin) */
body.city-tokyo {
  color-scheme: dark;

  --deep-red-bright: #ff4ec8;
  --sakura: #ff6ec7;
  --gold: #5ce1ff;
  --gradient-hero:
    radial-gradient(ellipse at 15% 10%, rgba(255, 43, 214, 0.28), transparent 48%),
    radial-gradient(ellipse at 85% 0%, rgba(0, 240, 255, 0.2), transparent 42%),
    linear-gradient(165deg, #05050f, #12081c 55%, #0a0a14);

  /* Core surfaces */
  --bg: #070714;
  --bg-elevated: #10101c;
  --text: #f2f4ff;
  --text-muted: #a8aec8;
  --card: #121228;
  --card-solid: #121228;
  --border: rgba(92, 225, 255, 0.18);
  --glass: rgba(10, 10, 24, 0.9);
  --surface-2: #0c0c18;
  --paper-warm: #0a0a14;

  /* Align design-system tokens used by shared components */
  --jp-fill: #070714;
  --jp-fill-2: #0c0c18;
  --jp-surface: #121228;
  --jp-ink: #f2f4ff;
  --jp-ink-soft: #d0d4ea;
  --jp-gray: #a8aec8;
  --jp-hairline: rgba(92, 225, 255, 0.16);
  --jp-red: #ff4ec8;
  --jp-red-deep: #ff2bd6;
  --jp-sakura: #ff6ec7;
  --jp-gold: #5ce1ff;

  --ink: #f2f4ff;
  --muted: #a8aec8;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
}

body.city-tokyo.city-theme-dark,
body.city-tokyo {
  /* class hook for shared dark rules */
}

body.city-tokyo .city-hero {
  position: relative;
  background: var(--gradient-hero);
}

body.city-tokyo .city-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff2bd6, #00f0ff, transparent);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
}

body.city-tokyo .card {
  border-radius: 6px;
  border: 1px solid rgba(255, 43, 214, 0.22);
  background: var(--card-solid);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.4);
}

body.city-tokyo .card:hover {
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.16), 0 0 40px rgba(255, 43, 214, 0.1);
}

body.city-tokyo .btn--primary {
  background: linear-gradient(135deg, #ff2bd6, #7b2fff 50%, #00f0ff);
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 43, 214, 0.3);
}

body.city-tokyo .chip {
  background: rgba(0, 240, 255, 0.1);
  color: #7ae7ff;
  border-color: rgba(0, 240, 255, 0.3);
  border-radius: 4px;
}

body.city-tokyo .visual-panel {
  border-radius: 6px;
  border-style: solid;
  border-color: rgba(255, 43, 214, 0.35);
  background:
    linear-gradient(145deg, rgba(255, 43, 214, 0.14), rgba(0, 240, 255, 0.08)),
    #10102a;
}

body.city-tokyo .neon-line {
  height: 2px;
  margin: 1rem 0 1.5rem;
  background: linear-gradient(90deg, transparent, #ff2bd6, #00f0ff, transparent);
  box-shadow: 0 0 12px #00f0ff;
}

body.city-tokyo .city-stat strong {
  color: #5ce1ff;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}

body.city-tokyo .section__eyebrow {
  letter-spacing: 0.22em;
  color: #ff6ec7;
}

body.city-tokyo .section__title {
  color: var(--text);
}

body.city-tokyo .city-hero__title {
  color: var(--text);
  text-shadow: 0 0 30px rgba(255, 43, 214, 0.3);
}

body.city-tokyo .site-header {
  background: rgba(7, 7, 20, 0.92);
  border-bottom-color: rgba(0, 240, 255, 0.12);
}

body.city-tokyo .site-footer {
  background: #0a0a16;
  border-top-color: rgba(0, 240, 255, 0.1);
}

/* Hero photo frame */
body.city-tokyo .city-hero__media {
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.12), 0 16px 48px rgba(0, 0, 0, 0.45);
}
body.city-tokyo .city-back:hover {
  color: #5ce1ff;
}