/* ============================================================================
   샵파인더 디자인 토큰 — 자동 생성 파일. 직접 고치지 마세요.
   원본: assets/css/styles.css 의 :root
   갱신: php tools/tokens_sync.php --write

   styles.css 를 불러오지 않는 독립 페이지(privacy/terms/board/admin 등)가
   토큰을 쓸 수 있도록 :root 만 떼어낸 것입니다.
   ============================================================================ */

:root {

    /* ---- 레일 / 잉크 ---- */
    --rail:        #101C30;
    --rail-hover:  #17253C;
    --rail-active: #1B2C48;
    --rail-border: #24374F;
    --rail-text:   #AFBDD0;
    --rail-icon:   #7D8FA8;
    --rail-label:  #61728C;

    /* ---- 브랜드 (앰버 → 시그널 블루) ---- */
    --brand-50:  #F4F8FE;
    --brand-100: #EDF4FE;
    --brand-200: #BFD8FA;
    --brand-500: #2E80F2;
    --brand-600: #1F6FEB;   /* 주 버튼·링크·활성 */
    --brand-700: #1552B8;   /* hover */
    --brand-800: #0B4A9E;   /* 연한 배경 위 글자 */

    /* ---- 액센트 (활성 표시선·보조 강조) ---- */
    --accent:       #21A9E1;
    --accent-light: #5CC8EC;

    /* ---- 중립 (slate 한 벌만) ---- */
    --white:    #FFFFFF;
    --canvas:   #F5F7FA;
    --gray-50:  #F7F9FC;
    --gray-100: #F1F4F8;
    --gray-150: #EDF1F5;
    --gray-200: #E3E8EF;
    --gray-300: #DCE2EA;
    --gray-350: #C3CBD6;
    --gray-400: #9AA6B5;
    --gray-500: #6B7A8D;
    --gray-600: #48566A;
    --gray-700: #3D4A5C;
    --gray-800: #24303F;
    --gray-900: #16202E;
    --ink:      #16202E;

    /* ---- 상태 ---- */
    --green-100: #DCF5E7;
    --green-500: #3EAE7C;
    --green-600: #2F8F65;
    --green-800: #0F5132;
    --red-50:    #FEF5F5;
    --red-100:   #FDE7E7;
    --red-500:   #E5484D;
    --red-600:   #CE2C31;
    --red-800:   #9B1C1C;
    /* 앰버 = 신규·알림 전용. 버튼/링크에 쓰지 않는다 */
    --amber-100: #FCEFD2;
    --amber-500: #F59E0B;
    --amber-700: #C9862A;
    --amber-800: #7A4A05;
    --amber-pin: #F5C451;

    /* ---- 등급 (현장 학습된 규칙 — 유지) ---- */
    --grade-a: #E5484D;
    --grade-b: #F59E0B;
    --grade-c: #3EAE7C;
    --grade-d: #6B7A8D;

    /* ---- 타이포 ---- */
    --font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    --font-num:    'IBM Plex Sans', 'Pretendard Variable', sans-serif;
    --font-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

    /* ---- 라운드 (3단 + pill) ---- */
    --radius-sm:   8px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-pill: 999px;

    /* ---- 그림자 (3단) ---- */
    --shadow-card:  0 1px 2px rgba(16, 28, 48, .06);
    --shadow-btn:   0 8px 18px -8px rgba(31, 111, 235, .65);
    --shadow-modal: 0 18px 44px -20px rgba(16, 28, 48, .38);

    /* ---- 레이아웃 ---- */
    --rail-width:        236px;
    --rail-width-narrow:  72px;
    --topbar-height:      60px;
    --tabbar-height:      74px;
    --gap:                18px;
    --pad:                24px;

    /* ---- 아래는 리디자인 대상이 아닌 기존 스케일 ----
       tokens.css 에는 없지만 코드에서 20개 항목이 661곳에서 쓰인다.
       지우면 그 자리가 전부 무효가 되므로 그대로 옮겨 둔다.
       (--navbar-height 는 STEP 2 에서 레일 도입과 함께 제거했다) */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
}