/* ============================================================
   선정평가 시스템 — 디자인 토큰
   기준: 반도체 교육-LMS (SemiLMS) 디자인 시스템. 색·간격·형태는 이 파일에서만 정한다.
   로드 순서: tokens.css → app.css
   ============================================================ */
:root {
  /* 표면: 바탕 > 셸(사이드바·상단바) > 카드 > 카드 강조 */
  --bg: #060b14;
  --surface: #0b1322;
  --card: #0f1a2e;
  --card-2: #142139;
  --hover: #182a48;
  --inset: #0a1424;

  --line: rgba(148, 163, 184, 0.1);
  --line-2: rgba(148, 163, 184, 0.17);
  --line-3: rgba(148, 163, 184, 0.28);

  --text: #f1f5f9;
  --text-2: #aab6c8;
  --muted: #6f7f96;

  /* 브랜드: 스카이 블루 + 보조 바이올렛 */
  --primary: #0ea5e9;
  --primary-2: #38bdf8;
  --primary-3: #0284c7;
  --primary-face: rgba(14, 165, 233, 0.12);
  --primary-edge: rgba(56, 189, 248, 0.32);

  --violet: #8b5cf6;
  --violet-t: #a78bfa;
  --violet-face: rgba(139, 92, 246, 0.13);
  --violet-edge: rgba(167, 139, 250, 0.3);

  --green: #10b981;
  --green-t: #34d399;
  --green-face: rgba(16, 185, 129, 0.12);
  --green-edge: rgba(52, 211, 153, 0.3);

  --amber: #f59e0b;
  --amber-t: #fbbf24;
  --amber-face: rgba(245, 158, 11, 0.12);
  --amber-edge: rgba(251, 191, 36, 0.3);

  --red: #ef4444;
  --red-t: #f87171;
  --red-face: rgba(239, 68, 68, 0.12);
  --red-edge: rgba(248, 113, 113, 0.32);

  --cyan: #06b6d4;
  --cyan-t: #22d3ee;
  --cyan-face: rgba(6, 182, 212, 0.12);
  --cyan-edge: rgba(34, 211, 238, 0.3);

  --grad-brand: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  --grad-primary: linear-gradient(180deg, #19aef0 0%, #0284c7 100%);
  --grad-green: linear-gradient(180deg, #14c08a 0%, #059669 100%);
  --grad-hero: linear-gradient(135deg, #112443 0%, #0d1a33 52%, #0b1529 100%);

  /* 다크 화면 안의 흰 종이(서명지·로고판) */
  --paper: #ffffff;
  --paper-ink: #15223b;
  --paper-line: #d8e0eb;
  --paper-muted: #58677f;

  --scrim: rgba(2, 6, 12, 0.72);
  --glass: rgba(11, 19, 34, 0.86);
  --glass-bg: rgba(6, 11, 20, 0.88);
  --grid-line: rgba(148, 163, 184, 0.045);

  /* 형태 */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --sh-1: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --sh-card: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
  --sh-pop: 0 28px 64px -12px rgba(0, 0, 0, 0.7);
  --sh-primary: 0 8px 20px -8px rgba(14, 165, 233, 0.6);
  --ring: 0 0 0 3px rgba(14, 165, 233, 0.22);

  /* 배치 */
  --nav-w: 322px;
  --top-h: 64px;
  --gutter: 32px;
  --tap: 44px;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "D2Coding", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-sticky: 20;
  --z-bar: 30;
  --z-savebar: 40;
  --z-scrim: 65;
  --z-nav: 70;
  --z-modal: 80;
  --z-toast: 90;

  color-scheme: dark;
}

@media (max-width: 960px) {
  :root { --gutter: 16px; --top-h: 56px; }
}