/**
 * XCHEV design tokens
 * Tokyo-night OLED showroom — dark, precise, colorful.
 * Electric teal + magenta on near-black. Not neon-gamer.
 */

:root {
  --xc-white: #eef4fb;
  --xc-graphite: #07090e;
  --xc-gray: #8b97ab;
  --xc-charcoal: #10151d;
  --xc-cyan: #3ce8d8;
  --xc-magenta: #ff4d8d;
  --xc-violet: #8b7cff;
  --xc-amber: #ffc857;
  --xc-cyan-soft: rgba(60, 232, 216, 0.16);
  --xc-cyan-mid: rgba(60, 232, 216, 0.34);
  --xc-magenta-soft: rgba(255, 77, 141, 0.16);
  --xc-magenta-mid: rgba(255, 77, 141, 0.32);
  --xc-violet-soft: rgba(139, 124, 255, 0.16);
  --xc-line: rgba(238, 244, 251, 0.1);
  --xc-line-strong: rgba(238, 244, 251, 0.22);
  --xc-line-light: rgba(238, 244, 251, 0.12);
  --xc-line-light-strong: rgba(238, 244, 251, 0.28);
  --xc-overlay: rgba(7, 9, 14, 0.52);
  --xc-overlay-heavy: rgba(7, 9, 14, 0.78);
  --xc-error: #ff6b7a;
  --xc-error-soft: rgba(255, 107, 122, 0.16);

  --xc-bg: var(--xc-graphite);
  --xc-text: var(--xc-white);
  --xc-muted: var(--xc-gray);
  --xc-surface: #111820;
  --xc-surface-2: #171f2a;

  --xc-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --xc-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --xc-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --xc-fs-kicker: 0.6875rem;
  --xc-fs-xs: 0.75rem;
  --xc-fs-sm: 0.8125rem;
  --xc-fs-md: 1rem;
  --xc-fs-lg: clamp(1rem, 1.15vw, 1.125rem);
  --xc-h1: clamp(1.75rem, 4.4vw + 0.4rem, 3.15rem);
  --xc-h2: clamp(1.45rem, 2.8vw + 0.35rem, 2.35rem);
  --xc-h3: clamp(1.0625rem, 1.4vw, 1.3125rem);
  --xc-h4: 1rem;
  --xc-track: 0.18em;
  --xc-lh-tight: 1.25;
  --xc-lh-body: 1.75;
  --xc-lh-prose: 1.9;

  --xc-space-3xs: 0.25rem;
  --xc-space-2xs: 0.375rem;
  --xc-space-xs: 0.5rem;
  --xc-space-sm: 0.75rem;
  --xc-space-md: 1rem;
  --xc-space-lg: 1.5rem;
  --xc-space-xl: 2rem;
  --xc-space-2xl: 3rem;
  --xc-space-3xl: 4.5rem;
  --xc-space-4xl: 6.5rem;

  --xc-container: 1180px;
  --xc-wide: 1360px;
  --xc-pad: clamp(1.125rem, 4.2vw, 2.5rem);
  --xc-section: clamp(4rem, 8vw, 7.5rem);

  --xc-radius: 2px;
  --xc-radius-md: 4px;

  --xc-shadow: 0 1px 2px rgba(7, 9, 14, 0.35);
  --xc-shadow-md: 0 16px 40px rgba(7, 9, 14, 0.45);
  --xc-shadow-focus: 0 0 0 2px var(--xc-graphite), 0 0 0 4px var(--xc-cyan);
  --xc-glow-cyan: 0 0 28px rgba(60, 232, 216, 0.28);
  --xc-glow-magenta: 0 0 28px rgba(255, 77, 141, 0.22);

  --xc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --xc-duration: 0.35s;
  --xc-duration-slow: 0.7s;
  --xc-aos: 700ms;

  --xc-header: 4.25rem;
  --xc-header-solid: 4.25rem;
  --xc-touch: 2.75rem;

  --xc-z-base: 1;
  --xc-z-header: 40;
  --xc-z-drawer: 50;
  --xc-z-search: 60;
  --xc-z-skip: 80;

  --xc-grid: 48px;
}

@media (min-width: 1024px) {
  :root {
    --xc-header: 4.5rem;
    --xc-header-solid: 4.5rem;
  }
}