/**
 * GANASU YouTube Manager - Design Tokens
 * Version: 1.0
 */

:root {
  /* ============================================
     YouTube Analytics Branding Colors
     ============================================ */

  /* Primary - YouTube Red */
  --youtube-red: #FF0000;
  --youtube-red-dark: #CC0000;
  --youtube-red-light: #FF3333;
  --youtube-red-lighter: #FF6666;

  /* Background - Dark Theme */
  --bg-dark: #1a1a2e;
  --bg-darker: #16213e;
  --bg-navy: #0f1419;
  --bg-light: #f8f9fa;
  --bg-white: #ffffff;

  /* Accent Colors - Data Visualization */
  --accent-blue: #4285f4;
  --accent-green: #34a853;
  --accent-yellow: #fbbc04;
  --accent-orange: #ff6b35;
  --accent-purple: #9b59b6;
  --accent-cyan: #17a2b8;

  /* Chart Colors */
  --chart-1: #4285f4;
  --chart-2: #ea4335;
  --chart-3: #fbbc04;
  --chart-4: #34a853;
  --chart-5: #ff6b35;
  --chart-6: #9b59b6;

  /* Semantic Colors */
  --success: #34a853;
  --warning: #fbbc04;
  --danger: #ea4335;
  --info: #4285f4;

  /* Text Colors */
  --text-primary: #1a1a2e;
  --text-secondary: #6c757d;
  --text-light: #9e9e9e;
  --text-white: #ffffff;
  --text-muted: #b0b0b0;

  /* Border & Dividers */
  --border-light: #e0e0e0;
  --border-medium: #bdbdbd;
  --border-dark: #6c757d;
  --divider: rgba(0, 0, 0, 0.08);

  /* Sidebar */
  --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;

  /* ============================================
     Legacy Colors (유지)
     ============================================ */

  --color-primary-50:  #ffebee;
  --color-primary-100: #ffcdd2;
  --color-primary-500: #f44336;
  --color-primary-600: #e53935;
  --color-primary-700: #d32f2f;

  --color-secondary-500: #2196f3;
  --color-secondary-600: #1e88e5;
  --color-secondary-700: #1976d2;

  --color-success-500: #4caf50;
  --color-success-700: #388e3c;

  --color-warning-500: #ff9800;
  --color-warning-700: #f57c00;

  --color-error-500: #f44336;

  --color-info-500: #03a9f4;

  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #eeeeee;
  --color-neutral-300: #e0e0e0;
  --color-neutral-400: #bdbdbd;
  --color-neutral-500: #9e9e9e;
  --color-neutral-600: #757575;
  --color-neutral-700: #616161;
  --color-neutral-800: #424242;
  --color-neutral-900: #212121;

  /* 시맨틱 컬러 */
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary:  #eeeeee;

  --text-primary:   #212121;
  --text-secondary: #616161;
  --text-tertiary:  #9e9e9e;
  --text-inverse:   #ffffff;

  --border-primary:   #e0e0e0;
  --border-secondary: #bdbdbd;
  --border-focus:     #2196f3;

  --state-hover:  rgba(0, 0, 0, 0.04);
  --state-active: rgba(0, 0, 0, 0.08);
  --state-focus:  rgba(33, 150, 243, 0.12);

  /* ============================================
     타이포그래피
     ============================================ */

  --font-family-base: 'Pretendard Variable', 'Pretendard', -apple-system,
                      BlinkMacSystemFont, system-ui, Roboto, sans-serif;

  /* Heading Scale */
  --font-h1: 2.5rem;     /* 40px */
  --font-h2: 2rem;       /* 32px */
  --font-h3: 1.5rem;     /* 24px */
  --font-h4: 1.25rem;    /* 20px */
  --font-h5: 1.125rem;   /* 18px */
  --font-h6: 1rem;       /* 16px */

  /* Body Scale */
  --font-body-lg: 1.125rem;  /* 18px */
  --font-body: 1rem;         /* 16px */
  --font-body-sm: 0.875rem;  /* 14px */
  --font-body-xs: 0.75rem;   /* 12px */

  /* Display (Big Numbers) */
  --font-display-xl: 4rem;   /* 64px */
  --font-display-lg: 3rem;   /* 48px */
  --font-display-md: 2.5rem; /* 40px */
  --font-display-sm: 2rem;   /* 32px */

  /* Legacy Font Sizes */
  --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;

  /* Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* Line Heights */
  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* 간격 */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* 그림자 */
  --shadow-sm: 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);

  /* 경계선 */
  --border-width-thin: 1px;
  --border-radius-sm:  0.25rem;
  --border-radius-md:  0.5rem;
  --border-radius-lg:  0.75rem;
  --border-radius-xl:  1rem;
  --border-radius-full: 9999px;

  /* 애니메이션 */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   350ms;

  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 다크 모드 */
[data-bs-theme="dark"] {
  --bg-primary:   #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary:  #2d2d2d;
  --bg-light:     #1e1e1e;
  --bg-white:     #1a1a1a;

  --text-primary:   #ffffff;
  --text-secondary: #b3b3b3;
  --text-tertiary:  #808080;
  --text-inverse:   #121212;

  --border-primary:   #3d3d3d;
  --border-secondary: #545454;
  --border-light:     #3d3d3d;

  --state-hover:  rgba(255, 255, 255, 0.04);
  --state-active: rgba(255, 255, 255, 0.08);
}