/* ============================================================================
   tokens.css — RunnerOn Design Tokens (2026-05 Renewal)
   "Performance Calm" 컨셉 — 절제된 화이트스페이스 + 큰 타이포 + 데이터 중심

   레거시 변수(--runneron_*)는 그대로 두고, 신규 토큰(--ro-*)을 별도 네임스페이스로
   추가하여 점진적 마이그레이션이 가능합니다. 신규 컴포넌트는 --ro-* 사용 권장.
   ============================================================================ */

:root {
    /* ── 색상 (Light) ─────────────────────────────────────────────────────── */
    --ro-primary-50:  #EFF5FF;
    --ro-primary-100: #DBE8FF;
    --ro-primary-200: #B7D1FF;
    --ro-primary-300: #8AB3FF;
    --ro-primary-400: #6BA0FF;
    --ro-primary-500: #4E8FFF;       /* Brand Primary (기존 유지) */
    --ro-primary-600: #3A78EE;
    --ro-primary-700: #2960CC;
    --ro-primary-800: #1F4AA0;
    --ro-primary-900: #173778;

    --ro-accent-50:   #FFF1ED;
    --ro-accent-100:  #FFDBCF;
    --ro-accent-200:  #FFB89E;
    --ro-accent-300:  #FF946D;
    --ro-accent-400:  #FF7F50;       /* 레거시 호환 */
    --ro-accent-500:  #FF6B4A;       /* Coral CTA Accent */
    --ro-accent-600:  #E5552F;
    --ro-accent-700:  #B83F1E;

    --ro-success-500: #10B981;
    --ro-warn-500:    #F59E0B;
    --ro-danger-500:  #EF4444;
    --ro-info-500:    #06B6D4;

    --ro-gray-50:  #FAFBFC;
    --ro-gray-100: #F3F5F8;
    --ro-gray-200: #E5E9F0;
    --ro-gray-300: #CBD2DE;
    --ro-gray-400: #94A0B8;
    --ro-gray-500: #64748B;
    --ro-gray-600: #475569;
    --ro-gray-700: #334155;
    --ro-gray-800: #1E293B;
    --ro-gray-900: #0F172A;

    --ro-bg:           var(--ro-gray-50);
    --ro-surface:      #FFFFFF;
    --ro-surface-alt:  var(--ro-gray-100);
    --ro-border:       var(--ro-gray-200);
    --ro-border-soft:  rgba(15, 23, 42, 0.08);
    --ro-text:         var(--ro-gray-900);
    --ro-text-sub:     var(--ro-gray-500);
    --ro-text-muted:   var(--ro-gray-400);
    --ro-text-on-primary: #FFFFFF;

    /* ── 타이포 ──────────────────────────────────────────────────────────── */
    --ro-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                    system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR",
                    "Malgun Gothic", "맑은 고딕", sans-serif;
    --ro-font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular,
                    Menlo, Consolas, monospace;

    /* 타이포 스케일 (fluid clamp — 모바일~TV까지 자연 스케일) */
    --ro-text-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);  /* 11.5~12.5px */
    --ro-text-sm:   clamp(0.82rem, 0.80rem + 0.12vw, 0.90rem);  /* 13~14.5px */
    --ro-text-base: clamp(0.94rem, 0.92rem + 0.15vw, 1.05rem);  /* 15~17px */
    --ro-text-lg:   clamp(1.08rem, 1.04rem + 0.25vw, 1.25rem);  /* 17.5~20px */
    --ro-text-xl:   clamp(1.20rem, 1.14rem + 0.40vw, 1.45rem);  /* 19~23px */
    --ro-text-2xl:  clamp(1.45rem, 1.32rem + 0.70vw, 1.85rem);  /* 23~30px */
    --ro-text-3xl:  clamp(1.75rem, 1.55rem + 1.10vw, 2.40rem);  /* 28~38px */
    --ro-text-4xl:  clamp(2.10rem, 1.80rem + 1.60vw, 3.20rem);  /* 33~51px */
    --ro-text-5xl:  clamp(2.50rem, 2.00rem + 2.50vw, 4.20rem);  /* 40~67px — TV/와이드용 */
    --ro-text-display: clamp(3.00rem, 2.20rem + 4.00vw, 5.50rem);

    --ro-weight-regular: 400;
    --ro-weight-medium:  500;
    --ro-weight-semibold: 600;
    --ro-weight-bold:    700;
    --ro-weight-black:   900;

    --ro-leading-tight:  1.20;
    --ro-leading-snug:   1.35;
    --ro-leading-normal: 1.55;
    --ro-leading-loose:  1.75;

    --ro-tracking-tight:  -0.02em;
    --ro-tracking-normal: -0.01em;
    --ro-tracking-wide:   0.02em;

    /* ── 스페이싱 (4px base) ──────────────────────────────────────────────── */
    --ro-space-0:  0;
    --ro-space-1:  4px;
    --ro-space-2:  8px;
    --ro-space-3:  12px;
    --ro-space-4:  16px;
    --ro-space-5:  20px;
    --ro-space-6:  24px;
    --ro-space-8:  32px;
    --ro-space-10: 40px;
    --ro-space-12: 48px;
    --ro-space-16: 64px;
    --ro-space-20: 80px;
    --ro-space-24: 96px;
    --ro-space-32: 128px;

    /* 섹션 간격 fluid */
    --ro-section-y: clamp(48px, 8vw, 120px);

    /* ── Radius ──────────────────────────────────────────────────────────── */
    --ro-radius-xs:   4px;
    --ro-radius-sm:   8px;
    --ro-radius-md:   12px;
    --ro-radius-lg:   16px;
    --ro-radius-xl:   24px;
    --ro-radius-2xl:  32px;
    --ro-radius-pill: 9999px;

    /* ── Shadow ──────────────────────────────────────────────────────────── */
    --ro-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
    --ro-shadow-sm:  0 2px 6px rgba(15, 23, 42, 0.06);
    --ro-shadow-md:  0 6px 16px rgba(15, 23, 42, 0.08);
    --ro-shadow-lg:  0 14px 30px rgba(15, 23, 42, 0.10);
    --ro-shadow-xl:  0 24px 50px rgba(15, 23, 42, 0.14);
    --ro-shadow-primary: 0 12px 28px rgba(78, 143, 255, 0.30);
    --ro-shadow-accent:  0 12px 28px rgba(255, 107, 74, 0.28);

    /* ── 모션 ────────────────────────────────────────────────────────────── */
    --ro-ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --ro-ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
    --ro-ease-in:     cubic-bezier(0.32, 0, 0.67, 0);
    --ro-ease-spring: cubic-bezier(0.5, 1.4, 0.5, 1);
    --ro-dur-fast:    120ms;
    --ro-dur-base:    220ms;
    --ro-dur-slow:    420ms;

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --ro-container-sm: 640px;
    --ro-container-md: 768px;
    --ro-container-lg: 1024px;
    --ro-container-xl: 1240px;
    --ro-container-2xl: 1440px;
    --ro-container-tv: 1920px;
    --ro-container: var(--ro-container-xl);

    --ro-header-h: 64px;
    --ro-bottom-nav-h: 60px;

    /* ── Z-index 스케일 ─────────────────────────────────────────────────── */
    --ro-z-base:      1;
    --ro-z-sticky:    100;
    --ro-z-header:    1000;
    --ro-z-overlay:   5000;
    --ro-z-modal:     10000;
    --ro-z-toast:     20000;
    --ro-z-popup:     200000;
}

/* ── Dark Mode ─────────────────────────────────────────────────────────── */
[data-theme="dark"], .runneron_theme-dark {
    --ro-bg:          #0A0E14;
    --ro-surface:     #131820;
    --ro-surface-alt: #1A2030;
    --ro-border:      rgba(255, 255, 255, 0.08);
    --ro-border-soft: rgba(255, 255, 255, 0.04);
    --ro-text:        #E5EAF0;
    --ro-text-sub:    #94A0B8;
    --ro-text-muted:  #64748B;

    --ro-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
    --ro-shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.40);
    --ro-shadow-md:  0 6px 16px rgba(0, 0, 0, 0.50);
    --ro-shadow-lg:  0 14px 30px rgba(0, 0, 0, 0.55);
    --ro-shadow-xl:  0 24px 50px rgba(0, 0, 0, 0.60);
}

/* ── 시스템 다크 모드 자동 적용 (사용자가 명시적으로 라이트 지정 안 했을 때만) ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ro-bg:          #0A0E14;
        --ro-surface:     #131820;
        --ro-surface-alt: #1A2030;
        --ro-border:      rgba(255, 255, 255, 0.08);
        --ro-border-soft: rgba(255, 255, 255, 0.04);
        --ro-text:        #E5EAF0;
        --ro-text-sub:    #94A0B8;
        --ro-text-muted:  #64748B;
    }
}

/* ============================================================================
   Breakpoints — 반응형 4단 + TV
   --xs:  ~ 479px  (modern phones)
   --sm:  480~767  (large phones / phablets)
   --md:  768~1023 (tablets)
   --lg:  1024~1439 (laptops)
   --xl:  1440~1919 (desktops)
   --tv:  1920+    (TV / wide-screen)

   사용 예 (CSS):  @media (min-width: 768px) { ... }
   ============================================================================ */