name: tokyo-night
label: Tokyo Night
description: Cyberpunk Tokyo city lights with deep blues and electric pinks

palette:
  background: "#1a1b26"
  midground: "#7aa2f7"
  foreground: "#c0caf5"
  warmGlow: "rgba(122, 162, 247, 0.2)"
  noiseOpacity: 0.45

typography:
  fontSans: '"Noto Sans JP", "Inter", system-ui, sans-serif'
  fontMono: '"Fira Code", "JetBrains Mono", ui-monospace, monospace'
  fontDisplay: '"Noto Sans JP", sans-serif'
  fontUrl: "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Fira+Code:wght@400;500&display=swap"
  baseSize: "15px"
  lineHeight: "1.6"
  letterSpacing: "0.01em"

layout:
  radius: "0.375rem"
  density: comfortable

layoutVariant: standard

assets:
  bg: "none"

colorOverrides:
  primary: "#7aa2f7"
  primaryForeground: "#1a1b26"
  accent: "#bb9af7"
  ring: "#7aa2f7"
  destructive: "#f7768e"
  border: "rgba(122, 162, 247, 0.2)"
  muted: "#24283b"
  mutedForeground: "#565f89"
  secondary: "#414868"
  secondaryForeground: "#a9b1d6"
  success: "#9ece6a"
  warning: "#e0af68"

componentStyles:
  card:
    background: "linear-gradient(180deg, rgba(36, 40, 59, 0.95), rgba(26, 27, 38, 0.98))"
    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(122, 162, 247, 0.1)"
    borderRadius: "0.5rem"
  header:
    background: "linear-gradient(180deg, rgba(26, 27, 38, 0.98), rgba(22, 23, 34, 0.95))"
    boxShadow: "0 1px 0 rgba(122, 162, 247, 0.08)"
  tab:
    borderRadius: "0.375rem 0.375rem 0 0"

customCSS: |
  /* City lights bokeh effect */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background: 
      radial-gradient(circle at 20% 50%, rgba(122, 162, 247, 0.05) 0%, transparent 25%),
      radial-gradient(circle at 80% 30%, rgba(187, 154, 247, 0.04) 0%, transparent 25%),
      radial-gradient(circle at 50% 80%, rgba(240, 154, 200, 0.03) 0%, transparent 25%);
  }
  
  /* Neon glow on interactive elements */
  button:hover, [role="button"]:hover {
    box-shadow: 0 0 12px rgba(122, 162, 247, 0.2);
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: rgba(26, 27, 38, 0.8);
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7aa2f7, #bb9af7);
    border-radius: 4px;
  }