/* ==========================================================================
   K-POP Timeline - Design Tokens
   Based on sample.png reference
   ========================================================================== */

:root {
  /* ===== Color Palette ===== */

  /* Background */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FFFFFF;
  --color-bg-card: #FFFFFF;

  /* Accent - Korean Flag Colors (태극기) */
  --color-accent-primary: #E4002B;   /* Red (빨강) */
  --color-accent-secondary: #003DA5; /* Blue (파랑) */
  --color-accent-light: rgba(228, 0, 43, 0.1);

  /* Text */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-text-korean: #E4002B;  /* Red (빨강) */

  /* Timeline */
  --color-timeline-line: #E0E0E0;
  --color-timeline-dot: #E4002B;
  --color-year-marker-bg: #E4002B;
  --color-year-marker-text: #FFFFFF;

  /* Service Icons */
  --color-youtube: #FF0000;
  --color-spotify: #1DB954;
  --color-apple-music: #FC3C44;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(231, 76, 60, 0.15);
  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* ===== Typography ===== */

  /* Font Families */
  --font-family-ja: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-family-ko: 'Noto Sans KR', sans-serif;
  --font-family-en: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: 'Doto', monospace;

  /* Font Sizes */
  --font-size-hero: clamp(2.5rem, 5vw, 4rem);
  --font-size-year: clamp(2rem, 4vw, 3rem);
  --font-size-title-ja: 1.25rem;
  --font-size-title-ko: 0.875rem;
  --font-size-artist-ja: 1rem;
  --font-size-artist-ko: 0.75rem;
  --font-size-meta: 0.75rem;
  --font-size-small: 0.625rem;
  --font-size-body: 1rem;

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

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

  /* ===== Spacing ===== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 5rem;
  --spacing-section: 4rem;

  /* ===== Grid System ===== */
  --grid-columns: 12;
  --grid-gap: 1.5rem;
  --grid-padding: 4rem;

  /* ===== Layout ===== */
  --max-width-content: 1400px;
  --max-width-card: 700px;
  --card-padding: 0;
  --artwork-size: 200px;
  --artwork-size-mobile: 140px;

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ===== Z-Index ===== */
  --z-timeline: 1;
  --z-card: 10;
  --z-year-marker: 20;
  --z-header: 100;
  --z-modal: 1000;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Uncomment to enable dark mode
    --color-bg-primary: #1A1A1A;
    --color-bg-secondary: #2D2D2D;
    --color-bg-card: #2D2D2D;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #B0B0B0;
    --color-timeline-line: #404040;
    */
  }
}