/* tokens.css — 랭킹크루 디자인 토큰 (단일 출처)
 *
 * 값의 기준은 앱입니다: src/constants/theme.ts 의 figmaTokens.
 * 웹이 앱보다 뒤에 있으므로, 웹 CSS 는 이 파일의 변수만 참조하고
 * 자체 색상 리터럴을 두지 않습니다.
 *
 * 이 파일이 생기기 전 상태 (2026-08-31):
 *   브랜드 라임이 세 곳에서 세 값으로 갈라져 있었다
 *     앱 theme.ts   #C6FF34
 *     landing.css   #D7F205
 *     crew.css      #c6f24e
 *   폰트도 Pretendard / Lexend+Plus Jakarta Sans / Bricolage Grotesque 로 제각각이었다.
 *
 * ⚠️ 라임을 글자색으로 쓸 때 주의
 *   --rc-primary(#C6FF34) 는 어두운 배경에서만 읽힙니다.
 *     네이비(#07142B) 위 15.52:1  ✅
 *     오프화이트(#FCF8FA) 위 1.12:1  ❌
 *   밝은 배경 위 포인트 텍스트는 반드시 --rc-primary-font(#587A00) 를 쓸 것.
 *     흰색 위 5.00:1 ✅ · 오프화이트(#FCF8FA) 위 4.75:1 ✅ · 페이퍼(#f5f3ec) 위 4.50:1 ✅
 *     단 --rc-bg(#ECF1F5) 위는 4.40:1 로 AA 에 0.1 모자란다.
 *     라임 글자는 카드/흰 표면 위에 올리고, 페이지 배경 위에 바로 올리지 말 것.
 *     (앱도 같은 조합을 쓰고 있어 theme.ts 쪽 재검토 대상이다)
 *   (Figma 원본 #32E91A 는 흰 배경에서 1.64:1 이라 앱에서 이미 낮춘 값입니다.
 *    Figma 편집 권한이 없어 시안은 그대로 두고 구현값만 씁니다.)
 */

:root {
  /* ── 브랜드 (라이트/다크 공통) ────────────────────────── */
  --rc-primary: #C6FF34;        /* point/primary — 배경·강조면 */
  --rc-primary-dark: #A8E024;
  --rc-primary-light: #D9FF6B;
  --rc-on-primary: #121020;     /* 라임 위에 올라가는 글자 (15.84:1) */
  --rc-primary-font: #587A00;   /* 밝은 배경 위 포인트 글자 */

  /* ── 라이트 모드 (figmaTokens.light) ──────────────────── */
  --rc-bg: #ECF1F5;
  --rc-font: #171717;
  --rc-gray50: #F6FAFD;
  --rc-gray100: #FFFFFF;
  --rc-gray200: #E9EEF3;
  --rc-gray300: #DBE2E8;
  --rc-gray400: #B4BEC9;
  --rc-gray500: #8B95A1;
  --rc-gray600: #6B7684;
  --rc-gray700: #4E5968;
  --rc-gray800: #384251;
  --rc-gray900: #191F28;

  /* ── 타이포 ───────────────────────────────────────────── */
  /* 앱과 같은 Pretendard 하나로 통일한다. 표제/본문 구분은 굵기로 준다. */
  --rc-font-sans: 'Pretendard Variable', 'Pretendard', -apple-system,
                  BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', sans-serif;
  --rc-font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── 반경 ─────────────────────────────────────────────── */
  --rc-radius-sm: 8px;
  --rc-radius: 16px;
  --rc-radius-lg: 24px;
  --rc-radius-pill: 9999px;
}

/*
 * 다크 모드.
 * 웹은 아직 모드 전환 UI 가 없어 OS 설정만 따른다.
 * 랜딩(네이비 고정)·크루 셸(다크 고정)처럼 이미 색이 고정된 화면은
 * 각자 CSS 에서 --rc-* 를 덮어쓰지 않고 그대로 쓰므로 영향이 없다.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --rc-bg: #18181A;
    --rc-font: #FFFFFF;
    --rc-gray50: #202027;
    --rc-gray100: #282830;
    --rc-gray200: #373741;
    --rc-gray300: #4C4C5B;
    --rc-gray400: #6B6B77;
    --rc-gray500: #8C8C96;
    --rc-gray600: #A2A2AA;
    --rc-gray700: #CCCCCF;
    --rc-gray800: #E4E4E5;
    --rc-gray900: #FFFFFF;
    /* 다크에서는 라임을 그대로 글자로 쓸 수 있다 (앱 figmaTokens.dark 와 동일) */
    --rc-primary-font: #C6FF34;
  }
}