/* ============================================================
   KPOPVIEW V2.0 — tokens.css
   Phase 0 Foundation
   Naming: --kv-{group}-{role}
   ============================================================ */

:root,
[data-theme="dark"] {
  /* —— Surfaces —— */
  --kv-bg: #0B0B0F;
  --kv-surface: #16161C;
  --kv-surface-elevated: #1F1F28;
  --kv-surface-overlay: #262630;

  /* —— Borders —— */
  --kv-border: #2A2A35;
  --kv-border-hover: #3F3F4F;
  --kv-border-strong: #54545F;

  /* —— Text —— */
  --kv-text-primary: #FFFFFF;
  --kv-text-secondary: #A0A0B2;
  --kv-text-muted: #6B6B7A;
  --kv-text-inverse: #0B0B0F;

  /* —— Brand —— */
  --kv-primary: #FF2D92;
  --kv-primary-hover: #FF56A8;
  --kv-primary-muted: #4A1733;
  --kv-secondary: #7B61FF;
  --kv-secondary-hover: #9680FF;
  --kv-secondary-muted: #2E2352;

  /* —— Functional —— */
  --kv-highlight: #FFD600;
  --kv-up: #00E676;
  --kv-down: #FF3D71;
  --kv-info: #58A6FF;

  /* —— Glow (subtle) —— */
  --kv-glow-primary: 0 0 0 1px rgba(255, 45, 146, 0.45), 0 0 24px -4px rgba(255, 45, 146, 0.35);
  --kv-glow-focus: 0 0 0 2px rgba(255, 45, 146, 0.55);
  --kv-glow-up: 0 0 12px -2px rgba(0, 230, 118, 0.55);
  --kv-glow-down: 0 0 12px -2px rgba(255, 61, 113, 0.55);

  /* —— Elevation (depth via lightness) —— */
  --kv-elev-1: 0 1px 0 rgba(255,255,255,0.04) inset;
  --kv-elev-2: 0 2px 8px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
  --kv-elev-3: 0 12px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.05) inset;
  --kv-elev-4: 0 24px 64px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.06) inset;

  color-scheme: dark;
}

[data-theme="light"] {
  --kv-bg: #FAFAFA;
  --kv-surface: #FFFFFF;
  --kv-surface-elevated: #F4F4F7;
  --kv-surface-overlay: #ECECF1;
  --kv-border: #E4E4EA;
  --kv-border-hover: #C7C7D1;
  --kv-border-strong: #9C9CA8;
  --kv-text-primary: #0B0B0F;
  --kv-text-secondary: #4F4F5B;
  --kv-text-muted: #87878F;
  --kv-text-inverse: #FFFFFF;
  --kv-primary: #E60082;
  --kv-primary-hover: #FF2D92;
  --kv-primary-muted: #FFD9EB;
  --kv-secondary: #5B40E0;
  --kv-secondary-hover: #7B61FF;
  --kv-secondary-muted: #E2DBFF;
  --kv-highlight: #E5B900;
  --kv-up: #00B85F;
  --kv-down: #E5285C;
  --kv-elev-1: 0 1px 2px rgba(11,11,15,0.05);
  --kv-elev-2: 0 2px 8px rgba(11,11,15,0.08);
  --kv-elev-3: 0 12px 28px rgba(11,11,15,0.10);
  --kv-elev-4: 0 24px 56px rgba(11,11,15,0.14);
  color-scheme: light;
}

/* —— Type stacks —— */
:root {
  --kv-font-kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --kv-font-en: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --kv-font-display: "Space Grotesk", "Inter Variable", Inter, sans-serif;
  --kv-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* —— Spacing —— */
  --kv-space-1: 4px;
  --kv-space-2: 8px;
  --kv-space-3: 12px;
  --kv-space-4: 16px;
  --kv-space-6: 24px;
  --kv-space-8: 32px;
  --kv-space-12: 48px;
  --kv-space-16: 64px;
  --kv-space-24: 96px;

  /* —— Radius —— */
  --kv-radius-1: 4px;
  --kv-radius-2: 8px;
  --kv-radius-3: 12px;
  --kv-radius-4: 16px;
  --kv-radius-6: 24px;
  --kv-radius-full: 9999px;

  /* —— Motion —— */
  --kv-dur-instant: 120ms;
  --kv-dur-fast: 200ms;
  --kv-dur-base: 320ms;
  --kv-dur-slow: 480ms;
  --kv-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --kv-ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --kv-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   Compatibility Aliases (기존 코드 호환용)
   ============================================================ */
:root {
  /* Duration alias */
  --kv-duration-instant: var(--kv-dur-instant);
  --kv-duration-fast:    var(--kv-dur-fast);
  --kv-duration-base:    var(--kv-dur-base);
  --kv-duration-slow:    var(--kv-dur-slow);
  /* Easing alias */
  --kv-ease-in-out:      var(--kv-ease-inout);
  /* Font alias */
  --kv-font-sans-ko:     var(--kv-font-kr);
  --kv-font-sans-en:     var(--kv-font-en);

  /* Elevation 0 */
  --kv-elev-0: none;

  /* Glow alias (full-length names) */
  --kv-focus-ring: var(--kv-glow-focus);

  /* Typography scale (var-based for inline use) */
  --kv-text-display-xl: 72px;
  --kv-text-display-l:  56px;
  --kv-text-display-m:  44px;
  --kv-text-h1:         36px;
  --kv-text-h2:         28px;
  --kv-text-h3:         22px;
  --kv-text-h4:         18px;
  --kv-text-h5:         16px;
  --kv-text-h6:         14px;
  --kv-text-body-lg:    18px;
  --kv-text-body-md:    16px;
  --kv-text-body-sm:    14px;
  --kv-text-caption:    12px;
  --kv-text-overline:   11px;

  --kv-leading-display: 1.1;
  --kv-leading-heading: 1.3;
  --kv-leading-body:    1.6;
  --kv-leading-caption: 1.5;

  --kv-weight-regular:  400;
  --kv-weight-medium:   500;
  --kv-weight-semibold: 600;
  --kv-weight-bold:     700;
  --kv-weight-heavy:    800;

  /* Layout */
  --kv-header-h-desktop: 72px;
  --kv-header-h-compact: 56px;
  --kv-bottom-tab-h:     56px;
  --kv-container-max:    1440px;
  --kv-container-xl:     1280px;
  --kv-container-lg:     1024px;
  --kv-container-md:     768px;

  /* Z-index */
  --kv-z-base:     0;
  --kv-z-sticky:   100;
  --kv-z-dropdown: 200;
  --kv-z-overlay:  300;
  --kv-z-modal:    400;
  --kv-z-toast:    500;
  --kv-z-tooltip:  600;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kv-dur-instant: 1ms;
    --kv-dur-fast:    1ms;
    --kv-dur-base:    1ms;
    --kv-dur-slow:    1ms;
  }
}