/* ============================================
   색상 시스템
   ============================================ */

:root {
  /* ============================================
     색상 시스템 - Light Mode
     ============================================ */

  /* 1. Primary (브랜드 핵심 색상) */
  --primary-brand: #FFE086;
  --primary-brand-hover: #FFB800;
  --primary-brand-active: #FFE086;

  /* 2. Background (배경색) */
  --bg-default: #F0F0F0;        /* Porcelain Haze */
  --bg-muted: #F7F7F7;          /* Snow Flask */
  --bg-surface: #FFFFFF;        /* White */
  --bg-dark: #0B1215;           /* Inkstone - 다크모드용 */
  --bg-gray-50: #F9FAFB;        /* Light Gray */
  --bg-header-footer: #FFFFFF;  /* Header & Footer */
  --bg-card: #FFFFFF;           /* Card background - start.html buttons */
  --bg-contentbox: #FFFFFF;     /* Content box background */
  --bg-textarea: #FFFFFF;       /* Textarea background */

  /* 3. Text (텍스트 색상) */
  --text-default: #262626;      /* Charcoal */
  --text-muted: #212427;        /* Graphite Fog */
  --text-light: #F7F7F7;        /* Snow Flask - 다크배경용 */
  --text-slate: #4B5563;        /* Slate Gray */
  --text-inkstone: #0B1215;     /* Inkstone - 진한 텍스트 */

  /* 4. Border & Divider (경계선, 구분선) */
  --border: 1px solid var(--border-default);    /* 기본 보더 */
  --border-default: #E5E7EB;    /* Light gray border */
  --border-muted: #212427;      /* Graphite Fog */
  --border-light: #F0F0F0;      /* Porcelain Haze */

  /* 5. State (상태 색상) */
  --state-success: #28A745;     /* Green */
  --state-error: #DC3545;       /* Red */
  --state-warning: #F1EDE8;     /* Worn Dune */
  --state-info: #FAF6F5;        /* Rose Quartz */

  /* 6. 비활성 / Disabled */
  --inactive: #9CA3AF;          /* Gray */

  /* 7. Timeline (타임라인 전용) */
  --timeline-circle: #0B1215;   /* Timeline circle */
  --timeline-line: #E5E7EB;     /* Timeline line */
}

/* ============================================
   다크모드 색상 시스템
   ============================================ */
html[data-theme="dark"],
:root[data-theme="dark"] {
  /* 1. Primary (브랜드 핵심 색상) - Dark */
  --primary-brand: #F3CB59;
  --primary-brand-hover: #E0B847;
  --primary-brand-active: #F3CB59;

  /* 2. Background (배경색) - Dark */
  --bg-default: #10151A;        /* Dark background */
  --bg-muted: #1C1F22;          /* Muted dark */
  --bg-surface: #1C1F22;        /* Surface dark */
  --bg-header-footer: #111827;  /* Header & Footer dark */
  --bg-card: #1F2937;           /* Card background - start.html buttons */
  --bg-contentbox: #1C1F22;     /* Content box background - dark */
  --bg-textarea: #262626;       /* Textarea background - dark */

  /* 3. Text (텍스트 색상) - Dark */
  --text-default: #F4F4F4;      /* Default text */
  --text-muted: #B9BEC3;        /* Muted text */
  --text-light: #F4F4F4;        /* Light text */
  --text-inkstone: #F4F4F4;     /* Inkstone - 다크모드에선 밝게 */

  /* 4. Border & Divider (경계선, 구분선) - Dark */
  --border-default: #2A2E31;    /* Default border */
  --border-muted: #2A2E31;      /* Muted border */
  --border-light: #2A2E31;      /* Light border */

  /* 5. State (상태 색상) - Dark */
  --state-success: #5CD47D;     /* Lighter Green */
  --state-error: #F26B6B;       /* Lighter Red */
  --state-warning: #FAF6F5;     /* Rose Quartz */
  --state-info: #F1EDE8;        /* Worn Dune */

  /* 6. 비활성 / Disabled - Dark */
  --inactive: #6B7280;          /* Darker Gray */

  /* 7. Timeline (타임라인 전용) - Dark */
  --timeline-circle: #F4F4F4;   /* Timeline circle */
  --timeline-line: #2C2F33;     /* Timeline line */
}

/* 다크모드 강제 적용 (인라인 스타일 오버라이드) */
[data-theme="dark"],
[data-theme="dark"] html,
[data-theme="dark"] body {
  background-color: var(--bg-default) !important;
  color: var(--text-default) !important;
}