/* Design Tokens — Harry Potter 특별전 A안
   출처: Figma HarryPotter_UI / Color Styles A폴더 + A안 섹션(1178-9779)
   화면 구현 시 이 변수만 사용한다. (tokens.md와 1:1 대응)

   ⚠ 26-08-24 디자이너 지시로 팔레트를 보라 계열(색상 261° 근처)로 재조정했고,
   ⚠ 26-09-29 디자이너 지시로 키 컬러를 **네이비 #7691FF**(--color-purple-200)로 바꿨다.
   보라 계열 전부를 #7691FF 의 색상 228° 로 옮기고, 각 색의 채도·명도·투명도는 그대로 뒀다
   (메인 #6139AC → #3950AC · hsl 228 50% 45%). 옛 보라 값은 git 기록에 있다.
   ⚠ 토큰 **이름은 옛 이름(violet/purple/blue/ice) 그대로**다 — 값만 네이비다. Figma 베리어블
   이름을 아직 못 읽어서, 이름을 지금 바꾸면 나중에 두 번 바꿔야 하기 때문이다.
   Figma 베리어블 컬렉션을 확인하는 대로 이름을 거기에 맞춰 정리한다. */

:root {
  /* 메인 컬러 — 이 팔레트 전체의 기준색 */
  --color-violet-500: #3950AC;       /* 메인 브랜드 컬러 */

  /* CTA 전용 — Figma btn/main (3084:5703 big · 3084:8124 small) 확정 스펙.
     ⚠ 26-09-17 디자이너 지시로 CTA 표면이 보라(당시 #6139AC)에서 이 두 색으로 바뀌었다. */
  --color-gray-900: #1C1A1D;         /* system/gray_900 — CTA 표면 */
  --color-gray-100: #D7D7D7;         /* system/gray_100 — 홈 설명 등 보조 본문 */
  --color-gray-200: #AAAAAA;         /* system/gray_200 — 도움말 링크 등 약한 보조 */
  --color-purple-100: #EEF1FE;       /* system/purple_100 — CTA 보더·코너 */
  --color-purple-200: #7691FF;       /* system/purple_200 — 스캔 화면 키컬러 */
  --color-purple-400: #6F8AF8;       /* system/purple_400 — 스캔 로딩·완료 링 */
  --color-blue-50: #EEF1FF;          /* system/blue_50 — 입력 필드·선택 버튼 글자 */
  --color-purple-700: #324696;       /* system/purple_700 — 관리자 설정의 선택된 칩 */
  --color-gray-700: #646464;         /* system/gray_700 — 관리자 설정의 미선택 칩 */

  /* Color — A/ (값은 네이비로 재조정됨 · 26-09-29) */
  --color-black: #0E0E0F;            /* A/Black */
  --color-black-60: rgba(14, 14, 15, 0.5);   /* A/Black_60 */
  --color-white-100: #FFFFFF;        /* A/White_100 */
  --color-white-60: rgba(255, 255, 255, 0.6); /* A/White_60 */
  --color-blue-300: #DEE5FF;         /* A/blue_300 → 라일락 하이라이트 */
  --color-blue-400: #9BADF5;         /* A/blue_400 → 라일락 포인트 */
  --color-blue-60: rgba(222, 229, 255, 0.6);  /* A/blue_60 */
  --color-blue-800: #232940;         /* A/blue_800 → 딥바이올렛 표면 */

  /* Color — Fastpass 팔레트 (Figma Fastpass Q1~Q3 · 스플래시 2281-2272 확정 스타일)
     26-08-05 디자이너 지시로 승격: 이후 화면은 이 팔레트를 기준으로 통일한다. */
  --color-night-900: #05070F;                    /* 심연 배경 (그라디언트 종점) */
  --color-night-800: #101733;                    /* CTA·패널 배경 */
  --color-night-700: #1A2552;                    /* 배경 그라디언트 상단 */
  --color-peri-400: #7B92EE;                     /* 바이올렛 포인트 (CTA 보더·활성 도트) */
  --color-ice-300: #CBD5FF;                      /* 라일락 하이라이트 (라이트 보더) */
  --color-ice-200: #BCC4E6;                      /* 라일락 보조 텍스트 */
  --surface-chip: rgba(32, 42, 84, 0.4);         /* 키워드 칩·선택 요소 표면 */
  --surface-steel-20: rgba(125, 141, 205, 0.2);  /* 글로우 보더·문장 빈칸 표면 */
  --surface-frost-5: rgba(255, 255, 255, 0.05);  /* 원형 아이콘 버튼 표면 */
  --glow-ice: 0 0 12px rgba(222, 229, 255, 0.4); /* 선택 글로우 (blue-300 @0.4) — 라일락 */

  /* Gradient — A/ */
  --gradient-radial: radial-gradient(circle, rgba(25, 42, 110, 0.5) 0%, rgba(72, 100, 214, 0.8) 100%);
  --gradient-linear-blue: linear-gradient(180deg, #FFFFFF 0%, #9BADF5 100%); /* 흰색 → 라일락 */
  --gradient-linear-white: linear-gradient(180deg, #FFFFFF 0%, #DCDCDC 100%);

  /* Gradient — Fastpass */
  --gradient-night: linear-gradient(180deg, var(--color-night-700) 0%, #000000 39%); /* 화면 배경 */
  --gradient-dialog: linear-gradient(90deg, rgba(92, 113, 196, 0.24) 0%, rgba(16, 23, 51, 0) 100%); /* 대화 패널 */

  /* Font Family */
  --font-primary: 'NEXON Lv2 Gothic OTF', '넥슨Lv2고딕 OTF', sans-serif;  /* Figma base/* 서체 — 자체 호스팅 */
  --font-display: 'Hahmlet', 'Noto Serif KR', serif;                      /* Figma accent/* 서체(KR) — 자체 호스팅 */
  --font-display-en: 'Harry Beast Cyr', 'Hahmlet', serif;                 /* accent 타이틀의 EN 판 — 자체 호스팅 */
  --font-secondary: 'NEXON Lv2 Gothic OTF', '넥슨Lv2고딕 OTF', sans-serif;

  /* Spacing (8pt grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-full: 9999px;

  /* 기능 색 · 포커스 링 — 두 태블릿이 각자 :root 에 두던 것을 올렸다(26-09-28).
     포커스 링은 키보드 조작 때만 보인다. ⚠ 완드는 멀리서 보는 화면이라 바깥 링을 7px 로 덮어 쓴다(앱 :root). */
  --func-error: #F87171;
  --focus-ring: 0 0 0 3px var(--color-night-900), 0 0 0 6px var(--color-blue-400);
}

/* 크기 단위 — 공통 컴포넌트는 Figma 숫자에 단위를 곱한다. 시안 프레임이 둘이라 단위도 둘이다.
     --ds-u   스캐너 프레임(가로 1133×744) 숫자용 — Popup · Login.
              스캐너는 그대로(= 앱의 --u). 완드는 :root 에 --ds-u: calc(var(--u) * 1200 / 744)
     --ds-wu  완드 프레임(세로 1200×1920) 숫자용 — 시작 화면 · QuestButton stage · LanguageToggle.
              완드는 그대로(= 앱의 --u). 스캐너는 :root 에 --ds-wu: calc(var(--u) * 744 / 1200)
   두 앱 모두 16:10 태블릿의 짧은 변으로 --u 가 정해져, 이렇게 두면 같은 기기에서 두 앱이 같은 픽셀로 그린다.
   ⚠ 여기서 값을 정하지 않는다 — 컴포넌트가 var(--ds-u, var(--u, 1px)) 로 요소마다 읽어야, 앱이 컨테이너에서
     --u 를 바꿀 때(프리뷰 배율 등) 따라온다. 앱이 한 화면만 고정 px 로 두려면 그 화면에 --ds-u: 1px 를 준다. */

/* Typography scale — A안 화면 실사용 조합 (위계 순: 큰 것 → 작은 것) */
.text-display-lg { font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: -0.5px; text-transform: uppercase; }
.text-display-md { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -0.5px; text-transform: uppercase; }
.text-display-sm { font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: -0.5px; text-transform: uppercase; }
.text-numeral    { font-family: var(--font-primary); font-weight: 500; font-size: 24px; line-height: normal; }
.text-title      { font-family: var(--font-primary); font-weight: 500; font-size: 20px; line-height: 30px; }
.text-subtitle   { font-family: var(--font-primary); font-weight: 500; font-size: 18px; line-height: 1; }
.text-body-lg    { font-family: var(--font-primary); font-weight: 500; font-size: 16px; line-height: 1; }
.text-label-heavy { font-family: var(--font-primary); font-weight: 900; font-size: 16px; line-height: normal; }
.text-btn-secondary { font-family: var(--font-secondary); font-weight: 600; font-size: 16px; line-height: normal; }
.text-body       { font-family: var(--font-primary); font-weight: 500; font-size: 14px; line-height: 1.5; }
.text-caption    { font-family: var(--font-primary); font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: -0.24px; }
.text-caption-sm { font-family: var(--font-primary); font-weight: 500; font-size: 12px; line-height: 16px; }