/* ============================================================
   마이애미짐 디자인 토큰 ② 매장 대형 화면(사이니지)

   웰컴모니터 · 랭킹보드 · 러닝보드 · 출석 태블릿용.
   회원이 3~5m 떨어져서 보는 화면이라 글자 하한 28px, 테두리 3px,
   번인 방지 표류, 발광으로 위계 표현 — 손에 들고 보는 앱과 전제가 다르다.

   tokens-core.css 다음에 불러온다.
   ============================================================ */

:root {

  /* ── 바탕 (필드) ──────────────────────────────────
     일렉트릭 네이비.
     검은 천장·검은 기구가 있는 공간에서 블랙 화면은 배경에 묻힌다.
     전구색(2700~3000K) 조명 아래라 차가운 화면이 색상 대비로 뜬다. */
  --bg-base:     #0B2A54;
  --bg-surface:  rgba(16, 38, 72, 0.72);
  --bg-elevated: #17376A;
  --bg-signage:  var(--bg-base);

  /* 대기 — 배경 연출 전용. UI 요소에 쓰지 말 것 */
  --atmos:       #2A66CE;
  --atmos-deep:  #153C7E;
  --accent-glow: rgba(86,144,255,.13);

  /* 화면 밖 여백 (16:9가 아닌 패널일 때 생기는 레터박스).
     검정으로 두면 화면이 뚝 끊겨 보인다 */
  --letterbox: linear-gradient(180deg,#1B4488 0%,#0B2A54 42%,#061630 100%);


  /* ── GOLD — 성취 전용 ─────────────────────────────
     ① 1위  ② 게이지(쌓이는 것)  ③ 화면당 대표 액션 1개.
     테두리·라벨·일반 수치에는 절대 쓰지 않는다.
     인쇄용 골드 #C9A227은 발광 패널에서 탁해져서, 색상은 유지하고 명도만 올렸다. */
  --gold:        #D9A93A;
  --gold-bright: #FFC94A;
  --gold-deep:   #8A6A18;
  --glow-gold:   0 0 18px rgba(255,201,74,.8), 0 0 52px rgba(217,169,58,.36);


  /* ── WHITE — 구조 담당 주력 색 ────────────────────
     흰색 단색으로 선을 그으면 눈이 아프므로 투명도 3단계로 위계를 만든다. */
  --line-1: rgba(255,255,255,.12);
  --line-2: rgba(255,255,255,.26);
  --line-3: rgba(255,255,255,.52);

  --text-primary:   #FFFFFF;
  --text-secondary: #A9BDCC;
  --text-muted:     #63798A;

  --glow-sm: 0 0 8px rgba(255,255,255,.35);
  --glow-md: 0 0 14px rgba(255,255,255,.30), 0 0 40px rgba(255,255,255,.12);


  /* ── 게이지 — 진행·경험치 계열 공통 ───────────────
     쌓이는 것은 전부 이 값을 쓴다. 뒤는 필드 색, 앞으로 갈수록 골드로 달아오른다.
     새 게이지를 만들 때 색을 따로 정하지 말 것. */
  --g1: rgba(42,102,206,.24);
  --g2: rgba(150,150,190,.44);
  --g3: rgba(255,201,74,.58);
  --g-edge1: #FFF3C4;
  --g-edge2: #FFC94A;
  --g-glow:  0 0 22px rgba(255,201,74,.9), 0 0 58px rgba(255,201,74,.42);

  /* 블랙 필드 화면용 게이지 시작색 — 트랙이 거의 검정이라 흰빛을 진하게 잡음 */
  --g-app-1: rgba(255,255,255,.32);
  --g-app-2: rgba(255,255,255,.65);
  --g-app-3: var(--gold-bright);


  /* ── 순위 위계 ────────────────────────────────────
     1위만 골드. 2·3위는 화이트 명도로 구분한다.
     상위권을 전부 금색 계열로 두면 1위가 특별해 보이지 않는다. */
  --tier-1: #FFC94A;
  --tier-2: #FFFFFF;
  --tier-3: #C4C0B8;
  --tier-4: #6E6A62;

  /* 팝업 뒤 화면 어둡게 — 응원 팝업(랭킹 보드)처럼 잠깐 가운데 뜨는 카드 뒤에 깐다.
     뒤 화면이 살짝 비쳐야 "화면이 바뀐 게 아니라 잠깐 덮었다"로 읽힌다 */
  --scrim: rgba(0,0,0,.62);

  /* 배경 고스트 워드마크 */
  --ghost-text: rgba(200, 230, 255, 0.055);


  /* ── 타입 스케일 ──────────────────────────────────
     3m에서 읽히는 하한이 28px. 그 이하로 내리지 않는다. */
  --text-xs: 28px;
  --text-sm: 34px;
  --text-md: 42px;
  --text-lg: 56px;
  --text-xl: 76px;


  /* ── 형태 ─────────────────────────────────────────
     노치 크기와 테두리 두께는 전 사이니지 화면에서 하나로 통일한다.
     1px과 2px을 섞는 순간 아마추어 티가 난다. 1px은 LED 패널에서 아예 사라진다. */
  --notch: 28px;
  --stroke: 3px;

  /* 앱 화면이 쓰는 이름도 정의해 둔다 — style.css 하나를 모든 화면이 공유하기 때문에,
     이 값이 비어 있으면 사이니지에서 앱용 규칙이 깨진 채로 그려진다 */
  --bg-app: #0D0D0F;
}