/* ==========================================================================
   Newral Street - Design Guide & Token System
   ==========================================================================

   이 파일은 프로젝트 전체의 디자인 일관성을 위한 가이드라인입니다.
   index.html(운영자)과 viewer.html(플레이어) 모두 이 토큰을 참조합니다.

   ── 색상 철학 ──
   - 배경: 딥 네이비/블루블랙 (순수 검정 #000 사용 금지)
   - 주 강조: 네온 시안 #00f0ff (정보, 테두리, 글로우)
   - 보조 강조: 네온 퍼플 #bd00ff (프리미엄, 부스터)
   - 경고/상승: 네온 레드 #ff3366
   - 하락/안정: 네온 블루 #3388ff
   - 성공/확인: 네온 그린 #00e676
   - 골드 악센트: #ffd700 (배지, 크레딧 등 포인트 용도만)

   ── 여백 체계 (4px 기반) ──
   xs: 4px  | sm: 8px  | md: 12px | lg: 16px | xl: 20px | 2xl: 24px

   ── 라운딩 체계 ──
   sm: 6px  | md: 10px | lg: 14px | xl: 20px | full: 50%

   ── 폰트 웨이트 ──
   normal: 400 | medium: 500 | semibold: 600 | bold: 700 | heavy: 800

   ========================================================================== */

:root {
    /* ── 배경 ── */
    --ns-bg-primary: #0b0b15;
    --ns-bg-secondary: #111827;
    --ns-bg-card: #161b2e;
    --ns-bg-elevated: #1c2333;
    --ns-bg-input: rgba(0, 0, 0, 0.3);

    /* ── 텍스트 ── */
    --ns-text-primary: #e0e6ed;
    --ns-text-secondary: #8b9bb4;
    --ns-text-tertiary: #5c6b7f;
    --ns-text-inverse: #000;

    /* ── 브랜드 강조색 ── */
    --ns-accent-cyan: #00f0ff;
    --ns-accent-purple: #bd00ff;
    --ns-accent-blue: #0066ff;
    --ns-accent-gold: #ffd700;

    /* ── 시맨틱 색상 ── */
    --ns-color-up: #ff3366;
    --ns-color-down: #3388ff;
    --ns-color-success: #00e676;
    --ns-color-warning: #ffaa00;
    --ns-color-danger: #ff3366;

    /* ── 테두리 ── */
    --ns-border-subtle: rgba(255, 255, 255, 0.06);
    --ns-border-default: rgba(255, 255, 255, 0.1);
    --ns-border-accent: rgba(0, 240, 255, 0.2);
    --ns-border-gold: rgba(255, 215, 0, 0.3);

    /* ── 글로우 / 그림자 ── */
    --ns-glow-cyan: 0 0 12px rgba(0, 240, 255, 0.3);
    --ns-glow-purple: 0 0 12px rgba(189, 0, 255, 0.3);
    --ns-glow-gold: 0 0 12px rgba(255, 215, 0, 0.3);
    --ns-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --ns-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --ns-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --ns-shadow-float: 0 -4px 20px rgba(0, 0, 0, 0.5);

    /* ── 여백 ── */
    --ns-space-xs: 4px;
    --ns-space-sm: 8px;
    --ns-space-md: 12px;
    --ns-space-lg: 16px;
    --ns-space-xl: 20px;
    --ns-space-2xl: 24px;

    /* ── 라운딩 ── */
    --ns-radius-sm: 6px;
    --ns-radius-md: 10px;
    --ns-radius-lg: 14px;
    --ns-radius-xl: 20px;
    --ns-radius-full: 50%;

    /* ── 글래스 효과 ── */
    --ns-glass-bg: rgba(22, 27, 46, 0.85);
    --ns-glass-blur: blur(12px);
    --ns-glass-border: 1px solid rgba(255, 255, 255, 0.08);

    /* ── 트랜지션 ── */
    --ns-transition-fast: 0.15s ease;
    --ns-transition-normal: 0.25s ease;
    --ns-transition-slow: 0.4s ease;

    /* ── 그라디언트 프리셋 ── */
    --ns-gradient-bg: linear-gradient(135deg, #0a0a0f 0%, #0f1528 50%, #111827 100%);
    --ns-gradient-card: linear-gradient(145deg, #1c2333 0%, #111827 100%);
    --ns-gradient-accent: linear-gradient(135deg, #00f0ff, #bd00ff);
    --ns-gradient-success: linear-gradient(135deg, #00e676, #00c853);
    --ns-gradient-gold: linear-gradient(135deg, #ffd700, #ffaa00);
    --ns-gradient-danger: linear-gradient(135deg, #ff3366, #ff0844);
}