/* ===========================
   Design Tokens — 유일한 변수 정의 파일
   피그마 디자인 시스템 기준
   =========================== */

:root {
  /* ===== Colors ===== */

  /* Primary */
  --color-primary: #FF7900;
  --color-primary-hover: #FF522C;
  --color-primary-light: rgba(255, 121, 0, 0.2);
  --color-primary-orange: #FF7900;
  --color-primary-black: #000000;
  --color-primary-white: #FFFFFF;

  /* Secondary */
  --color-secondary-red: #FF522C;
  --color-secondary-yellow: #FFCF30;
  --color-secondary-green: #07D076;
  --color-secondary-blue: #0D8DF6;

  /* Text */
  --color-text-primary: #333333;
  --color-text-secondary: #888E8F;
  --color-text-tertiary: #4C4C4C;
  --color-text-inverse: #FFFFFF;

  /* Background */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F9FAFB;
  --color-bg-tertiary: #F3F4F6;
  --color-bg-inverse: #222222;

  /* Border */
  --color-border: #E0E0E0;
  --color-border-light: #E5E7EB;
  --color-border-default: #D1D5DB;
  --color-border-dark: #9CA3AF;

  /* Gray Scale */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Semantic */
  --color-accent: var(--color-primary);
  --color-success: var(--color-secondary-green);
  --color-warning: var(--color-secondary-yellow);
  --color-error: var(--color-secondary-red);
  --color-info: var(--color-secondary-blue);

  /* Link */
  --color-link: #2F94FF;
  --color-link-hover: #FF522C;

  /* Callout */
  --color-info-bg: #FFF7DC;
  --color-info-border: #FFBB00;
  --color-warning-bg: rgba(255, 121, 0, 0.2);
  --color-warning-border: #FF522C;
  --color-error-bg: #FFE3E3;
  --color-error-border: #FF3333;
  --color-success-bg: #E5FFE0;
  --color-success-border: #00CC00;

  /* Code Block */
  --color-code-bg: #333333;
  --color-code-text: #FFFFFF;
  --color-code-border: rgba(255, 255, 255, 0.08);

  /* Inline Code */
  --color-inline-code: #FE4545;
  --color-inline-code-bg: #FFF1F1;
  --color-inline-code-border: #FFE3E3;

  /* Notion Text Colors */
  --color-notion-red: #FE4545;
  --color-notion-blue: #2F94FF;
  --color-notion-gray: #9B9B9B;

  /* Dark */
  --color-dark-bg: #222222;
  --color-light-bg: #F8F9FA;
  --color-gray-bg: #F5F5F5;
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ===== Typography ===== */
  --font-main: 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: 'NanumGothicCoding', 'Fira Code', monospace;
  --font-pretendard: 'Pretendard', 'Inter', sans-serif;

  /* Aliases for backward compatibility */
  --font-family-primary: var(--font-main);
  --font-family-code: var(--font-code);
  --font-inter: var(--font-main);

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 64px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.17;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.55;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0.01em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ===== Spacing ===== */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* Numeric aliases (components.css 호환) */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* ===== Border Radius ===== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-default: 4px;
  --radius-md: 8px;
  --radius-lg: 13px;
  --radius-xl: 13px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --radius-component: 13px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ===== Z-Index ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Aliases (design-system.css 호환) */
  --z-index-dropdown: var(--z-dropdown);
  --z-index-sticky: var(--z-sticky);
  --z-index-fixed: var(--z-fixed);
  --z-index-modal-backdrop: var(--z-modal-backdrop);
  --z-index-modal: var(--z-modal);
  --z-index-popover: var(--z-popover);
  --z-index-tooltip: var(--z-tooltip);

  /* ===== Layout ===== */
  --container-max-width: 1200px;
  --content-max-width: 831px;
  --sidebar-width: 280px;
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 992px;
  --breakpoint-desktop: 1200px;
  --breakpoint-wide: 1440px;
}

/* Dark mode */
[data-theme="dark"] {
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #9CA3AF;
  --color-text-tertiary: #D1D5DB;
  --color-bg-primary: #111827;
  --color-bg-secondary: #1F2937;
  --color-bg-tertiary: #374151;
  --color-bg-inverse: #FFFFFF;
  --color-border-light: #374151;
  --color-border-default: #4B5563;
  --color-border-dark: #6B7280;
}