/* ============================================================
   Air Beat City — Design Tokens (claude.ai/design 디자인 시스템 동기화본)
   "One pulse, one city." 다크 네이티브 네온 시스템.
   ============================================================ */

/* ---- Webfonts ----
   Latin: Orbitron(디스플레이), Inter(본문), JetBrains Mono(모노) — Google Fonts
   Korean: Pretendard Variable — jsdelivr CDN (dynamic subset) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* ---- Brand core ---- */
  --abc-cyan: #00E6FF;        /* PRIMARY  — the pulse */
  --abc-violet: #5A3BFF;      /* SECONDARY — the ring */
  --abc-magenta: #FF3DFF;     /* ACCENT   — the city lights */

  --abc-cyan-bright: #5CF2FF;
  --abc-cyan-dim: #00A6B8;
  --abc-violet-bright: #7C62FF;
  --abc-violet-dim: #3E29B8;
  --abc-magenta-bright: #FF7AFF;
  --abc-magenta-dim: #C42BC4;

  /* ---- Neutral void scale (dark → light) ---- */
  --abc-void: #08090C;
  --abc-900: #12141A;
  --abc-800: #1C1E26;
  --abc-700: #2A2D36;
  --abc-600: #3B3F48;
  --abc-400: #6B7280;
  --abc-200: #C7C9CE;
  --abc-50:  #FFFFFF;

  /* ---- Signature gradients ---- */
  --abc-pulse: linear-gradient(90deg, #00E6FF 0%, #5A3BFF 50%, #FF3DFF 100%);
  --abc-pulse-135: linear-gradient(135deg, #00E6FF 0%, #5A3BFF 50%, #FF3DFF 100%);
  --abc-pulse-radial: radial-gradient(circle at 50% 0%, #5A3BFF 0%, #1C1E26 60%, #08090C 100%);
  --abc-cyan-violet: linear-gradient(135deg, #00E6FF 0%, #5A3BFF 100%);
  --abc-violet-magenta: linear-gradient(135deg, #5A3BFF 0%, #FF3DFF 100%);

  /* ---- Semantic / status ---- */
  --abc-live: #FF3DFF;
  --abc-onair: #FF3DFF;
  --abc-synced: #00E6FF;
  --abc-success: #2BE08A;
  --abc-warning: #FFC24B;
  --abc-danger: #FF4D6D;

  /* ---- Semantic aliases ---- */
  --bg-base: var(--abc-void);
  --bg-surface: var(--abc-900);
  --bg-raised: var(--abc-800);
  --surface-card: var(--abc-800);
  --surface-inset: var(--abc-void);

  --text-strong: var(--abc-50);
  --text-body: var(--abc-200);
  --text-muted: var(--abc-400);
  --text-brand: var(--abc-cyan);

  --border-hairline: rgba(255,255,255,0.07);
  --border-strong: var(--abc-700);
  --border-glow: rgba(0,230,255,0.45);

  --accent: var(--abc-cyan);
  --accent-2: var(--abc-magenta);

  --accent-ink: var(--abc-cyan);
  --accent-border: rgba(0,230,255,0.35);
  --accent-tint: rgba(0,230,255,0.08);
  --surface-tint: rgba(255,255,255,0.02);
  --on-accent: #04060A;

  --tone-live: #FF3DFF;
  --tone-synced: #00E6FF;
  --tone-violet: #7C62FF;
  --tone-success: #2BE08A;
  --tone-warning: #FFC24B;
  --tone-danger: #FF4D6D;
  --tone-neutral: #C7C9CE;

  /* ---- Typography ---- */
  --font-display: 'Orbitron', 'Pretendard Variable', system-ui, sans-serif;
  --font-body: 'Inter', 'Pretendard Variable', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Pretendard Variable', ui-monospace, 'SFMono-Regular', monospace;
  --font-display-kr: 'Pretendard Variable', 'Orbitron', sans-serif;
  --font-body-kr: 'Pretendard Variable', 'Inter', system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-3xs: 0.6875rem;
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3.5rem;
  --fs-5xl: 5rem;

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-display: 0.08em;
  --ls-wordmark: 0.18em;
  --ls-label: 0.16em;
  --ls-body: 0px;
  --ls-mono: 0.02em;

  /* ---- Spacing & layout (8px grid) ---- */
  --sp-0: 0px;  --sp-1: 2px;  --sp-2: 4px;   --sp-3: 8px;
  --sp-4: 12px; --sp-5: 16px; --sp-6: 24px;  --sp-7: 32px;
  --sp-8: 48px; --sp-9: 64px; --sp-10: 96px; --sp-11: 128px;

  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --gutter: 24px;

  /* ---- Effects: radii, shadows, glows, motion ---- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --bw-hair: 1px;
  --bw-1: 1px;
  --bw-2: 2px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.55);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.6);

  --glow-cyan: 0 0 0 1px rgba(0,230,255,0.5), 0 0 18px rgba(0,230,255,0.35);
  --glow-violet: 0 0 0 1px rgba(90,59,255,0.5), 0 0 18px rgba(90,59,255,0.4);
  --glow-magenta: 0 0 0 1px rgba(255,61,255,0.5), 0 0 18px rgba(255,61,255,0.38);
  --glow-cyan-soft: 0 0 24px rgba(0,230,255,0.25);
  --glow-magenta-soft: 0 0 24px rgba(255,61,255,0.25);
  --text-glow-cyan: 0 0 12px rgba(0,230,255,0.55);
  --text-glow-magenta: 0 0 12px rgba(255,61,255,0.5);

  --blur-glass: blur(14px) saturate(1.2);
  --glass-fill: rgba(18,20,26,0.6);
  --glass-border: rgba(255,255,255,0.08);

  --ease-pulse: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --grid-line: rgba(255,255,255,0.04);
}

/* ---- WHITE VERSION — "DAY SIGNAL" (opt-in: data-abc-theme="light" / .abc-light) ---- */
[data-abc-theme="light"], .abc-light {
  --abc-void: #EDEFF4;
  --abc-900: #F6F7FA;
  --abc-800: #FFFFFF;
  --abc-700: #D9DCE5;
  --abc-600: #C0C5D1;
  --abc-400: #626977;
  --abc-200: #343A46;
  --abc-50:  #0B0D14;

  --abc-pulse-radial: radial-gradient(circle at 50% 0%, #DCD4FF 0%, #F1F0FA 55%, #F6F7FA 100%);

  --bg-base: var(--abc-void);
  --bg-surface: var(--abc-900);
  --bg-raised: var(--abc-800);
  --surface-card: var(--abc-800);
  --surface-inset: var(--abc-void);
  --text-strong: var(--abc-50);
  --text-body: var(--abc-200);
  --text-muted: var(--abc-400);
  --border-strong: var(--abc-700);

  --text-brand: #007C8C;
  --border-hairline: rgba(11,13,20,0.08);
  --border-glow: rgba(0,124,140,0.5);

  --accent-ink: #007C8C;
  --accent-border: rgba(0,124,140,0.45);
  --accent-tint: rgba(0,166,184,0.09);
  --surface-tint: rgba(11,13,20,0.02);

  --tone-live: #C711C7;
  --tone-synced: #007C8C;
  --tone-violet: #5334F5;
  --tone-success: #148A55;
  --tone-warning: #9A6A0C;
  --tone-danger: #D42B4B;
  --tone-neutral: #5A6070;

  --shadow-sm: 0 1px 2px rgba(13,16,28,0.08);
  --shadow-md: 0 6px 20px rgba(13,16,28,0.10);
  --shadow-lg: 0 18px 48px rgba(13,16,28,0.16);

  --glow-cyan: 0 0 0 1px rgba(0,140,158,0.55), 0 0 18px rgba(0,230,255,0.28);
  --glow-violet: 0 0 0 1px rgba(90,59,255,0.5), 0 0 18px rgba(90,59,255,0.25);
  --glow-magenta: 0 0 0 1px rgba(199,17,199,0.5), 0 0 18px rgba(255,61,255,0.25);
  --glow-cyan-soft: 0 0 22px rgba(0,200,224,0.22);
  --glow-magenta-soft: 0 0 22px rgba(255,61,255,0.18);
  --text-glow-cyan: 0 0 12px rgba(0,230,255,0.30);
  --text-glow-magenta: 0 0 12px rgba(255,61,255,0.25);

  --glass-fill: rgba(255,255,255,0.65);
  --glass-border: rgba(11,13,20,0.08);

  --grid-line: rgba(11,13,20,0.05);
}

/* ---- Night re-scope — 라이트 테마 안의 상시 다크 영역(.abc-night) ---- */
.abc-night {
  --abc-void: #08090C;
  --abc-900: #12141A;
  --abc-800: #1C1E26;
  --abc-700: #2A2D36;
  --abc-600: #3B3F48;
  --abc-400: #6B7280;
  --abc-200: #C7C9CE;
  --abc-50:  #FFFFFF;

  --abc-pulse-radial: radial-gradient(circle at 50% 0%, #5A3BFF 0%, #1C1E26 60%, #08090C 100%);

  --bg-base: var(--abc-void);
  --bg-surface: var(--abc-900);
  --bg-raised: var(--abc-800);
  --surface-card: var(--abc-800);
  --surface-inset: var(--abc-void);
  --text-strong: var(--abc-50);
  --text-body: var(--abc-200);
  --text-muted: var(--abc-400);
  --text-brand: var(--abc-cyan);
  --border-hairline: rgba(255,255,255,0.07);
  --border-strong: var(--abc-700);
  --border-glow: rgba(0,230,255,0.45);

  --accent-ink: var(--abc-cyan);
  --accent-border: rgba(0,230,255,0.35);
  --accent-tint: rgba(0,230,255,0.08);
  --surface-tint: rgba(255,255,255,0.02);

  --tone-live: #FF3DFF;
  --tone-synced: #00E6FF;
  --tone-violet: #7C62FF;
  --tone-success: #2BE08A;
  --tone-warning: #FFC24B;
  --tone-danger: #FF4D6D;
  --tone-neutral: #C7C9CE;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.55);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.6);

  --glow-cyan: 0 0 0 1px rgba(0,230,255,0.5), 0 0 18px rgba(0,230,255,0.35);
  --glow-violet: 0 0 0 1px rgba(90,59,255,0.5), 0 0 18px rgba(90,59,255,0.4);
  --glow-magenta: 0 0 0 1px rgba(255,61,255,0.5), 0 0 18px rgba(255,61,255,0.38);
  --glow-cyan-soft: 0 0 24px rgba(0,230,255,0.25);
  --glow-magenta-soft: 0 0 24px rgba(255,61,255,0.25);
  --text-glow-cyan: 0 0 12px rgba(0,230,255,0.55);
  --text-glow-magenta: 0 0 12px rgba(255,61,255,0.5);

  --glass-fill: rgba(18,20,26,0.6);
  --glass-border: rgba(255,255,255,0.08);

  --grid-line: rgba(255,255,255,0.04);
}

/* ---- Base primitives ---- */
* { box-sizing: border-box; }

body.abc-body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.abc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
}

.abc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}

.abc-pulse-text {
  background: var(--abc-pulse);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.abc-dot-grid {
  background-image: radial-gradient(var(--abc-700) 1px, transparent 1px);
  background-size: 14px 14px;
}

.abc-tech-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}

::selection { background: rgba(0,230,255,0.3); color: #fff; }
[data-abc-theme="light"] ::selection, .abc-light ::selection { background: rgba(0,166,184,0.25); color: #0B0D14; }