/* =============================================================
 * Intra v2 — Design Tokens
 *
 * 목적: 색상/폰트/브레이크포인트/간격/반경/그림자를 단일 소스로 정의
 * 사용: custom.css 및 하위 커스텀 CSS 에서 var(--token-name) 참조
 * 로드: functions.php 의 intra_enqueue_global_extra_css() 에서
 *       custom.css 보다 먼저 enqueue 됨 (우선순위 의존)
 * ============================================================= */

:root {
    /* ---------------------------------------------------------
     * 1. 색상 팔레트 (Raw palette)
     * --------------------------------------------------------- */

    /* Neutrals */
    --color-white:         #fff;
    --color-black:         #000;

    /* Gray scale */
    --color-gray-50:       #f9fafb;
    --color-gray-100:      #f3f4f6;
    --color-gray-150:      #eef0f3;
    --color-gray-200:      #e5e7eb;
    --color-gray-300:      #d1d5db;
    --color-gray-400:      #9ca3af;
    --color-gray-500:      #6b7280;
    --color-gray-600:      #374151;
    --color-gray-700:      #1f2937;
    --color-gray-800:      #111;

    /* Legacy short-hex (tagDiv/워드프레스 기본과 혼재) */
    --color-gray-eee:      #eee;
    --color-gray-fafafa:   #fafafa;
    --color-gray-f1:       #f1f1f1;
    --color-gray-222:      #222;
    --color-gray-333:      #333;
    --color-gray-555:      #555;
    --color-gray-666:      #666;
    --color-gray-777:      #777;
    --color-gray-999:      #999;
    --color-gray-ccc:      #ccc;

    /* Brand accent (red) */
    --color-primary:       #e53935;
    --color-primary-alt:   #e51c23;
    --color-primary-dark:  #c00;

    /* ---------------------------------------------------------
     * 2. 색상 시맨틱 별칭 (Semantic aliases)
     * --------------------------------------------------------- */
    --color-text:          var(--color-gray-800);
    --color-text-strong:   var(--color-black);
    --color-text-muted:    var(--color-gray-500);
    --color-text-subtle:   var(--color-gray-400);
    --color-text-inverse:  var(--color-white);

    --color-border:        var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);
    --color-border-subtle: var(--color-gray-150);

    --color-bg:            var(--color-white);
    --color-bg-alt:        var(--color-gray-50);
    --color-bg-subtle:     var(--color-gray-100);

    --color-accent:        var(--color-primary);
    --color-accent-hover:  var(--color-primary-alt);

    /* ---------------------------------------------------------
     * 3. 불투명/그림자용 RGB 기본값
     * --------------------------------------------------------- */
    --rgb-black:           0, 0, 0;
    --rgb-white:           255, 255, 255;
    --rgb-slate:           15, 23, 42;
    --rgb-primary:         229, 57, 53;

    /* ---------------------------------------------------------
     * 4. 타이포그래피 — Family
     * --------------------------------------------------------- */
    --font-family-base:    var(--td_default_google_font_2, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif);
    --font-family-heading: var(--font-family-base);
    --font-family-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---------------------------------------------------------
     * 5. 타이포그래피 — Size scale
     * --------------------------------------------------------- */
    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13px;   /* 본문 기본 */
    --fs-md:   14px;
    --fs-lg:   15px;
    --fs-xl:   16px;
    --fs-2xl:  18px;
    --fs-3xl:  20px;
    --fs-4xl:  22px;
    --fs-5xl:  28px;
    --fs-6xl:  36px;

    /* ---------------------------------------------------------
     * 6. 타이포그래피 — Weight
     * --------------------------------------------------------- */
    --fw-normal:     400;
    --fw-medium:     500;
    --fw-semibold:   600;
    --fw-bold:       700;
    --fw-extrabold:  800;
    --fw-black:      900;

    /* ---------------------------------------------------------
     * 7. 간격 (Spacing scale)
     * --------------------------------------------------------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------------------------------------------------------
     * 8. 반경 (Border radius)
     * --------------------------------------------------------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* ---------------------------------------------------------
     * 9. 그림자 (Shadow)
     * --------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(var(--rgb-black), 0.06);
    --shadow-md: 0 4px 12px rgba(var(--rgb-slate), 0.08);
    --shadow-lg: 0 8px 32px rgba(var(--rgb-slate), 0.12);
    --shadow-xl: 0 20px 60px rgba(var(--rgb-slate), 0.10);

    /* ---------------------------------------------------------
     * 10. 전환/애니메이션
     * --------------------------------------------------------- */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:  .15s;
    --dur-base:  .25s;
    --dur-slow:  .4s;

    /* ---------------------------------------------------------
     * 11. 반응형 브레이크포인트 (참고값)
     *
     * 주의: CSS 변수는 @media 쿼리 안에서 직접 사용 불가.
     *       아래 값은 문서화 목적이며 @media 에서는 하드코딩 사용.
     *
     *   --bp-xs    ≤ 480px   구형/소형 모바일
     *   --bp-sm    ≤ 768px   모바일 (세로)
     *   --bp-md    ≤ 1024px  태블릿 (가로) / 소형 노트북
     *   --bp-lg    ≤ 1280px  노트북 / 데스크톱 기본
     *   --bp-xl    ≤ 1400px  데스크톱
     *   --bp-ultra ≤ 1920px  대형 모니터
     * --------------------------------------------------------- */
    --bp-xs:    480px;
    --bp-sm:    768px;
    --bp-md:    1024px;
    --bp-lg:    1280px;
    --bp-xl:    1400px;
    --bp-ultra: 1920px;

    /* ---------------------------------------------------------
     * 12. z-index 스택
     * --------------------------------------------------------- */
    --z-base:      1;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-header:    500;
    --z-overlay:   1000;
    --z-modal:     10000;
    --z-toast:     99999;
}