/* Pixlava 디자인 토큰 v1.0 — 기준 문서: docs/brand-guidelines.md */
:root {
  /* 브랜드 색 */
  --px-ember: #FFC93C;    /* 불씨 노랑: 강조 1점, 점수·보상 */
  --px-lava: #FF5A1F;     /* 용암 주황: 대표색, 주요 버튼 */
  --px-magma: #FF2E7E;    /* 마그마 핑크: 보조 강조, NEW·HOT 뱃지 */
  --px-coolant: #3FE0D0;  /* 냉각수 민트: 포커스·링크·성공 (뜨거운 색의 반대편) */

  /* 바탕 (어두운 화면이 기본) */
  --px-obsidian: #16121F; /* 흑요석: 페이지 바탕 */
  --px-basalt: #241D33;   /* 현무암: 카드·패널 */
  --px-crust: #3A3050;    /* 굳은 껍질: 테두리·구분선 */
  --px-ash: #F4EEE6;      /* 재: 본문 글자 */
  --px-smoke: #A89FB8;    /* 연기: 보조 글자 */

  /* 역할 */
  --bg: var(--px-obsidian);
  --surface: var(--px-basalt);
  --border: var(--px-crust);
  --text: var(--px-ash);
  --text-muted: var(--px-smoke);
  --primary: var(--px-lava);
  --on-primary: var(--px-obsidian); /* 주황 위 글자는 흰색이 아니라 흑요석 (대비 5.9:1) */
  --accent: var(--px-magma);
  --focus: var(--px-coolant);
  --heat-gradient: linear-gradient(180deg, var(--px-ember) 0%, var(--px-lava) 45%, var(--px-magma) 100%);

  /* 글꼴 */
  --font-pixel: 'Silkscreen', 'Galmuri11', monospace;           /* 로고 옆 제목·숫자·뱃지 (라틴 전용) */
  --font-body: 'Pretendard Variable', Pretendard, system-ui, sans-serif; /* 본문·한글 */

  /* 크기·간격 (4px 도트 격자) */
  --u: 4px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* 모서리: 둥글리지 않고 계단 모양 (도트 느낌) */
  --radius: 0;
  --pixel-corner: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);

  /* 그림자: 흐리지 않고 딱 떨어지는 도트 그림자 */
  --shadow-pixel: 4px 4px 0 0 var(--px-magma);
  --shadow-pixel-sm: 2px 2px 0 0 var(--px-crust);
  --glow-lava: 0 0 24px rgba(255, 90, 31, 0.45);

  /* 움직임: 빠르고 딱딱 끊기게 */
  --ease-snap: steps(4, end);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}