/* ============================================
   DESIGN TOKENS — concrete-jungle.jp
   00's City Pop × Urban Clutter × Urban Art Museum
   ============================================ */

:root {
  /* === COLORS === */
  --color-bg-primary: #1a1a1a;
  --color-bg-concrete: #2c2c2c;
  --color-bg-surface: #242424;
  --color-bg-elevated: #333333;
  --color-neon-pink: hsl(330, 100%, 60%);
  --color-neon-cyan: hsl(180, 100%, 55%);
  --color-neon-purple: hsl(270, 80%, 60%);
  --color-neon-green: hsl(120, 100%, 50%);
  --color-text-primary: #f0f0f0;
  --color-text-muted: #888888;
  --color-text-vivid: #ffffff;
  --color-border: rgba(255,255,255,0.08);
  --color-glow-pink: 0 0 20px hsl(330, 100%, 60%), 0 0 40px hsl(330, 100%, 40%);
  --color-glow-cyan: 0 0 20px hsl(180, 100%, 55%), 0 0 40px hsl(180, 100%, 35%);
  --color-glow-purple: 0 0 20px hsl(270, 80%, 60%), 0 0 40px hsl(270, 80%, 40%);

  /* === TYPOGRAPHY === */
  --font-display: 'Orbitron', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-jp: 'Noto Sans JP', sans-serif;
  --fs-hero: clamp(3rem, 8vw, 7rem);
  --fs-section: clamp(2rem, 5vw, 4rem);
  --fs-subtitle: clamp(1rem, 2.5vw, 1.5rem);
  --fs-body: clamp(0.875rem, 1.5vw, 1rem);
  --fs-small: clamp(0.75rem, 1vw, 0.875rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.8;
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-ultra: 0.15em;

  /* === SPACING === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;
  --space-section: clamp(4rem, 10vh, 8rem);

  /* === ANIMATION === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --duration-dramatic: 1200ms;
  --marquee-speed: 20s;

  /* === Z-INDEX === */
  --z-bg: -1;
  --z-base: 1;
  --z-card: 10;
  --z-popup: 100;
  --z-cursor: 500;
  --z-loader: 9999;

  /* === BORDERS & RADIUS === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --border-thin: 1px solid var(--color-border);
  --border-neon-pink: 1px solid var(--color-neon-pink);
  --border-neon-cyan: 1px solid var(--color-neon-cyan);
}