/* ==========================================
   CSS 변수 정의
   MAIC-Flask CSS 모듈화 Phase 1
   ========================================== */

:root {
  /* 색상 팔레트 */
  --primary-color: #8b9cf7;
  --primary-color-dark: #6366f1;
  --secondary-color: #9d7bf0;
  --accent-color: #f5a5fc;

  /* 배경 색상 */
  --bg-primary: #3a3d5c;
  --bg-secondary: #4a4d6c;
  --bg-tertiary: #5a5d7c;
  --bg-card: rgb(44 47 72 / 80%);
  --bg-input: rgb(255 255 255 / 5%);

  /* 텍스트 색상 */
  --text-primary: #e0e0e0;
  --text-secondary: #c1c3e0;
  --text-muted: #b0b0b0;

  /* 테두리 색상 */
  --border-light: rgb(255 255 255 / 10%);
  --border-focus: var(--primary-color);

  /* 그라디언트 */
  --gradient-bg:
    linear-gradient(
      135deg,
      var(--bg-primary),
      var(--bg-secondary),
      var(--bg-tertiary)
    );
  --gradient-text:
    linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--secondary-color) 50%,
      var(--accent-color) 100%
    );
  --gradient-button:
    linear-gradient(
      135deg,
      var(--primary-color-dark),
      var(--secondary-color)
    );

  /* 그림자 */
  --shadow-light: 8px 8px 16px rgb(0 0 0 / 30%);
  --shadow-dark: -8px -8px 16px rgb(255 255 255 / 10%);
  --shadow-hover-light: 12px 12px 24px rgb(0 0 0 / 40%);
  --shadow-hover-dark: -12px -12px 24px rgb(255 255 255 / 15%);
  --shadow-pressed-light: 4px 4px 8px rgb(0 0 0 / 30%);
  --shadow-pressed-dark: -4px -4px 8px rgb(255 255 255 / 10%);
  --shadow-button: 0 4px 12px rgb(139 156 247 / 30%);

  /* 텍스트 그림자 */
  --text-shadow-light: 0 2px 4px rgb(0 0 0 / 30%);
  --text-shadow-glow: 0 0 30px rgb(139 156 247 / 40%);

  /* 크기 */
  --border-radius: 20px;
  --border-radius-button: 15px;
  --border-radius-input: 15px;
  --border-radius-small: 10px;

  /* 간격 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;

  /* 폰트 - Pretendard Variable 스택 (자간이 좁은 폰트) */
  --font-family:
    "Pretendard Variable",
    "Pretendard",
    -apple-system,
    blinkmacsystemfont,
    system-ui,
    roboto,
    "Helvetica Neue",
    "Segoe UI",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    sans-serif;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 3rem;

  /* 폰트 두께 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 전환 효과 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index */
  --z-modal: 1000;
  --z-dropdown: 900;
  --z-header: 800;
  --z-card: 100;

  /* 최대 너비 */
  --max-width-container: 1280px;
  --max-width-text: 600px;

  /* 높이 */
  --min-height-viewport: 100vh;
  --height-button: 60px;
  --height-input: 48px;
}

/* Force-Light: product-wide light mode override */
html.force-light {
  color-scheme: light;
}

/* 다크 모드 지원 (향후 확장용) */
@media (prefers-color-scheme: dark) {
  :root {
    /* 다크 모드에서 더 어두운 색상 사용 */
    --bg-primary: #2a2d4c;
    --bg-secondary: #3a3d5c;
    --bg-tertiary: #4a4d6c;
  }
}

/* 고대비 모드 지원 (접근성) */
@media (prefers-contrast: more) {
  :root {
    --text-primary: #fff;
    --text-secondary: #e0e0e0;
    --border-light: rgb(255 255 255 / 30%);
  }
}