/* ============================================================ */
/* Alts-DevCenter 디자인 토큰 — AltsCodex.com 톤 일관성           */
/* ============================================================ */
/* 역할: altscodex 메인 사이트의 design_tokens.css 와 동일 토큰을  */
/*       Express + EJS 환경에서 사용. SCSS 빌드 없이 CSS 직접.    */
/* 사용 패턴:                                                    */
/*   sidebar.css 상단에서 @import "design_tokens.css"            */
/*   → 모든 사이드바 페이지에서 자동 로드.                        */
/* ============================================================ */

/* ── Google Fonts (Audiowide + Pretendard 등) ────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Pretendard:wght@400;500;600;700&display=swap');

/* ── Neo둥근모 Pro 한글 게임 픽셀 폰트 (jsDelivr CDN) ────────── */
@font-face {
  font-family: 'Neo둥근모 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/NeoDunggeunmoPro-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'NeoDunggeunmoPro-Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/NeoDunggeunmoPro-Regular.woff2') format('woff2');
}

/* ── 디자인 토큰 (CSS 변수) ─────────────────────────────────── */
:root {
  /* Primary 시안 (메인 인터랙션·강조) */
  --neon-primary:        #00FFE0;
  --neon-primary-rgb:    0, 255, 224;
  --neon-primary-04:     rgba(0, 255, 224, 0.04);
  --neon-primary-08:     rgba(0, 255, 224, 0.08);
  --neon-primary-15:     rgba(0, 255, 224, 0.15);
  --neon-primary-30:     rgba(0, 255, 224, 0.30);
  --neon-primary-60:     rgba(0, 255, 224, 0.60);

  /* Accent Gold (성공·프리미엄·완료) */
  --accent-gold:         #FFD700;
  --accent-gold-15:      rgba(255, 215, 0, 0.15);
  --accent-gold-30:      rgba(255, 215, 0, 0.30);

  /* Semantic */
  --semantic-success:    #34D399;
  --semantic-warning:    #FBBF24;
  --semantic-danger:     #F87171;
  --semantic-danger-08:  rgba(248, 113, 113, 0.08);
  --semantic-danger-30:  rgba(248, 113, 113, 0.30);
  --semantic-danger-50:  rgba(248, 113, 113, 0.50);

  /* Surface (다크 4단계) */
  --surface-base:        #050510;
  --surface-1:           #080810;
  --surface-2:           #0F0F1A;
  --surface-3:           #1A1A2A;

  /* Text */
  --text-primary:        #E8E8F0;
  --text-secondary:      #9999B5;
  --text-tertiary:       #6A6A88;

  /* Border */
  --border-subtle:       rgba(0, 255, 224, 0.08);
  --border-default:      rgba(0, 255, 224, 0.15);
  --border-strong:       rgba(0, 255, 224, 0.30);

  /* Shadow */
  --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:           0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg:           0 8px 24px rgba(0, 0, 0, 0.6);

  /* Glow (3단계) */
  --glow-subtle:
    0 0 0 1px var(--neon-primary-30),
    0 0 8px var(--neon-primary-15);
  --glow-normal:
    0 0 0 1px var(--neon-primary),
    0 0 12px var(--neon-primary-30);
  --glow-strong:
    0 0 0 1px var(--neon-primary),
    0 0 16px var(--neon-primary-60),
    0 0 32px var(--neon-primary-30);

  /* Motion */
  --motion-fast:         120ms;
  --motion-base:         200ms;
  --motion-slow:         400ms;
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);

  /* Radius */
  --radius-sm:           2px;
  --radius-md:           4px;
  --radius-lg:           8px;

  /* Font Family */
  --font-display:        'Audiowide', 'Neo둥근모 Pro', 'NeoDunggeunmoPro-Regular',
                         'JetBrains Mono', cursive, sans-serif;
  --font-sans:           'Space Grotesk', 'Pretendard', 'Lato',
                         system-ui, sans-serif;
  --font-mono:           'JetBrains Mono', 'Neo둥근모 Pro',
                         'NeoDunggeunmoPro-Regular', 'D2Coding',
                         'Courier New', monospace;
}

/* ── prefers-reduced-motion 의무 가드 ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}