/* ============================================================
   _tokens.css — Freetick Design Tokens (D-1.5, 2026-04-29)
   ============================================================
   Palette: Charcoal Black (#1A1A1B) + Golden Amber (#FFB400) + Soft Beige (#F5F5DC)
   References: IsThereAnyDeal, sir.kr/g7/overview
   WCAG AA/AAA verified (PHP 실측 D-1, D-1.5 보정 1/3/4 재실측):
     beige on charcoal 15.72 AAA / amber on charcoal 9.76 AAA
     mu 7.23 AAA / ht 4.98 AA / lime 8.80 AAA / red 6.27 AA / urgent 7.42 AAA
   ⚠ BEIGE on AMBER = 1.61 FAIL → amber 위 텍스트는 반드시 --on-ac (charcoal)
   Amber 사용 정책 (5-i 결정): 정적 amber만 카운트, hover/focus 자유 / 카드당 1~2회

   ============================================================
   D-1.5 사이트 전체 매핑 SSOT (Step 1~5 sed/grep 참조)
   ============================================================
   인디고 #6366f1 / #818cf8 / #a5b4fc → 컨텍스트별 분리:
     · Epic 카드 → var(--brand-epic)
     · urgent/upcoming → var(--urgent)  [신규 D-1.5]
     · 보조 텍스트 → var(--mu)
     · CTA → var(--ac)
   구녹 #22c55e / #4ade80 / #3ddc84 → var(--green) (lime)
   amber 변형 #f59e0b / #ffcc33 → var(--ac)
   PSPlus #003791 (1.62 FAIL) → var(--brand-psplus) #5588ff (5.26 AA)
   xbox #107c10 (2.93 LARGE) → var(--brand-xbox) #3ea83e (5.14 AA)  [D-1.5 보정 4]
   itch #ec4899 (4.45) → var(--brand-itch) #f06aaf (5.52 AA)         [D-1.5 보정 4]
   ios #888888 (4.43) → var(--brand-ios) #a8a8a8 (6.60 AAA)         [D-1.5 보정 4]
   #1e1e2c (1.06 FAIL) → var(--bd)
   #13131a (1.06 FAIL) → var(--bg2)
   #fff on amber (1.78 FAIL) → var(--on-ac)
   font-size px → var(--font-xs/sm/md/lg/xl/2xl) [10px 이하 12px 승격 M1 사이트 확대]
   ============================================================ */

:root {
  /* ── 배경 (charcoal 단계) ────────────────────────── */
  --bg:   #1A1A1B;   /* base */
  --bg2:  #232324;   /* card */
  --bg3:  #2A2A2C;   /* hover */
  --bg4:  #313133;   /* active */

  /* ── 보더 (D-1.5 보정 3: bg3와 식별 향상 0.002→0.019) ── */
  --bd:   #3a3a3c;   /* L=0.0425, bg3와 명도차 OK (was #2C2C2E L=0.0253) */
  --bd2:  #38383A;

  /* ── 텍스트 (beige 단계) ─────────────────────────── */
  --tx:   #F5F5DC;   /* body 15.72 AAA */
  --mu:   #A8A899;   /* secondary 7.23 AAA */
  --ht:   #8A8A7E;   /* hint 4.98 AA */
  --app-genre-tx: #ddddd2;   /* .app-genre on amber-tinted bg (D-2 hotfix H1 의도 색) */

  /* ── 액센트 (amber) ──────────────────────────────── */
  --ac:        #FFB400;   /* primary 9.76 AAA */
  --ac-dim:    #CC9000;   /* hover dim 6.26 AA */
  --ac-light:  #FFC847;   /* lighter amber for emphasis (--ac +15% lightness, ~10 AAA est. on dark bg) */
  --on-ac:     #1A1A1B;   /* ⚠ amber 배경 위 텍스트는 반드시 charcoal */

  /* ── 시그널 (가격·할인·경고·오류·시간임박) ──────────── */
  --green:  #84cc16;   /* lime — 가격·할인·FREE 8.80 AAA (amber 톤 정합) */
  --red:    #FF6B6B;   /* coral — 오류·경고 6.27 AA */
  --urgent: #ff8a3d;   /* warm orange — 시간임박·urgent 7.42 AAA  [D-1.5 보정 1 신규] */
  --orange: #f59e0b;   /* D-9 신규: amber-500 (--ac과 다른 warm orange, 9회 사용) */
  --cyan:   #06b6d4;   /* D-9 신규: cyan-500 (6회 사용) */
  --amber:  #FFB400;   /* alias for --ac */

  /* ── 위시리스트 (warm coral, amber 가족 — D-1 v2) ── */
  --wish:      #ff8a80;   /* 7.62 AAA — 위시리스트 강조 (--ac 정책 위반 회피) */
  --wish-dim:  #d65c5c;   /* hover */

  /* ── 카테고리 브랜드 (D-1.5 보정 4: bg2 위 가시성 회복) ── */
  --brand-epic:      #a5b4fc;   /* 8.72 AAA */
  --brand-steam:     #388bfd;   /* 5.20 AA — border */
  --brand-steam2:    #79b8ff;   /* 8.38 AAA — text */
  --brand-xbox:      #3ea83e;   /* 5.14 AA on bg2 (was #107c10 2.93 LARGE)  [D-1.5 보정 4-A] */
  --brand-psplus:    #5588ff;   /* 5.26 AA — #003791(1.62 FAIL) 대체 */
  --brand-itch:      #f06aaf;   /* 5.52 AA on bg2 (was #ec4899 4.45)        [D-1.5 보정 4-B] */
  --brand-itch2:     #f472b6;   /* 6.57 AA — text */
  --brand-software:  #06b6d4;   /* 7.16 AAA — border */
  --brand-software2: #22d3ee;   /* 9.62 AAA — text */
  --brand-ios:       #a8a8a8;   /* 6.60 AAA on bg2 (was #888888 4.43)       [D-1.5 보정 4-C] */

  /* ── 폰트 사이즈 토큰 6종 (M4 / C4) ────────────────── */
  --font-xs:  12px;   /* 캡션 (M1: 10/11px 사이트 전체 → 12px 승격) */
  --font-sm:  14px;   /* 보조 */
  --font-md:  16px;   /* 본문 권장 */
  --font-lg:  18px;   /* 부제목 */
  --font-xl:  22px;   /* H2 */
  --font-2xl: 28px;   /* H1 */

  /* ── 폰트 weight 3종 ─────────────────────────────── */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;   /* D-1.5 final: 31회 사용 */
  --fw-bold:    700;
  --fw-extrabold: 800;  /* D-1.5 final: 25회 사용 */
  --fw-black:    900;   /* D-8 신규: logo-mark 브랜드 (7회 사용) */

  /* ── line-height 3종 (C5) ────────────────────────── */
  --leading-normal:  1.5;   /* 일반 */

  /* ── 8pt 간격 9종 (S2) ───────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* ── 그림자 3종 (S3 / D-2 본격 적용) ──────────────── */
  --shadow-md: 0 2px 8px rgba(0,0,0,.5);

  /* ── 시맨틱 그림자 (D-11 / 컴포넌트별) ───── */
  --shadow-sticky:        0 2px 10px rgba(0,0,0,.45);
  --shadow-sticky-up:     0 -6px 24px rgba(0,0,0,.35);
  --shadow-card-hover:    0 2px 16px rgba(132,204,22,.1);
  --shadow-ring-wish:     0 0 0 1px rgba(255,107,158,.3);
  --shadow-glow-pink:     0 4px 14px rgba(255,77,125,.4);
  --shadow-glow-pink-lg:  0 6px 22px rgba(255,77,125,.58);
  --shadow-ring-focus:    0 0 0 2px rgba(255,180,0,.2);
  --shadow-pulse-rest:    0 0 0 0 rgba(255,107,107,0);
  --shadow-pulse-active:  0 0 0 3px rgba(255,107,107,.25);
  --shadow-cta:           0 4px 20px rgba(255,180,0,.35), 0 1px 0 rgba(255,255,255,.1) inset;
  --shadow-cta-hover:     0 6px 24px rgba(255,180,0,.5), 0 1px 0 rgba(255,255,255,.15) inset;


  /* ── 모서리 4종 (S4 / D-2 본격 적용) ──────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r:      10px;   /* legacy alias (D-2에서 점진 마이그레이션) */

  /* ── 트랜지션 3종 (C6) ────────────────────────────── */
  --t-fast: .12s ease;
  --t-base: .15s ease;   /* D-1.5 final: 실제 사용 .15s에 맞춤 (was .18s)*/
  --t-slow: .3s ease;

  /* ── 컴포넌트 사전 슬롯 (D-1.5 P2 — D-2 컴포넌트 표준화 사용) ── */
  --btn-h:        40px;     /* 버튼 표준 높이 (8pt grid) */
  --btn-h-sm:     32px;     /* 작은 버튼 */
  --card-gap:     10px;     /* 카드 그리드 간격 (D-12: 12→10 실측 정합) */
  --container-max: 1240px;  /* 최대 너비 */
  --header-h:      50px;    /* 헤더 표준 높이 */
}

/* ── 글로벌 인터랙션 (M2 + M3) ──────────────────────── */

/* M2: 키보드 포커스 (마우스 클릭 시는 안 보임) */
*:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: inherit;
}

/* M3: 클릭 피드백 (모든 인터랙티브 요소) */
button:active,
a:active,
[role="button"]:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}

/* ── D-3 예약 슬롯 (Heroicons 도입 시) ──────────────── */
/* --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px;  */
/* 이모지 정책 D-1 결정: 기능형(📅✅⚠) → SVG / 마케팅형(🔥🆓💰🎮) → 유지 */

/* ── EOF ─────────────────────────────────────────── */