/* ═══════════════════════════════════════════════
   COLOR TOKENS — two layers
   ───────────────────────────────────────────────
   LAYER 1 · PRIMITIVE  (--color-*)  ← raw palette.
     A "paint store." Numbered steps. DO NOT use
     these directly in component/screen code.
   LAYER 2 · SEMANTIC   (--text-* / --surface-* …)
     Named by role, no numbers. USE ONLY THESE
     when building UI. They point at primitives,
     and are remapped per theme (light / dark).
   ═══════════════════════════════════════════════ */

/* ── LAYER 1 · PRIMITIVE ──────────────────────── */
:root {
  /* Neutral — cool gray */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f7f8f8;
  --color-neutral-100: #eef0f1;
  --color-neutral-200: #e2e5e7;
  --color-neutral-300: #cbcfd3;
  --color-neutral-400: #9fa6ad;
  --color-neutral-450: #7d858d;
  --color-neutral-500: #646b72;
  --color-neutral-600: #4d545b;
  --color-neutral-700: #363b41;
  --color-neutral-800: #23272b;
  --color-neutral-900: #14171a;
  --color-neutral-950: #0b0d0f;

  /* Accent — blue */
  --color-brand-50:  #eef4ff;
  --color-brand-300: #8fb4ff;
  --color-brand-400: #5c8dff;
  --color-brand-500: #2e6aff;
  --color-brand-600: #1d54e6;
  --color-brand-700: #163fb0;

  /* Semantic hues */
  --color-green-400: #4ade80;
  --color-green-500: #16a34a;
  --color-green-600: #16833f;
  --color-green-50:  #ecfdf3;
  --color-amber-400: #fbbf24;
  --color-amber-500: #d97706;
  --color-amber-700: #9a5700;
  --color-amber-50:  #fff7ed;
  --color-red-400:   #f87171;
  --color-red-500:   #dc2626;
  --color-red-700:   #b91c1c;
  --color-red-50:    #fef2f2;

  /* Chart hues — 범주형 계열 전용(상태색과 분리). 500은 라이트 면, 600은 다크 면용 단계 */
  --color-orange-500: #eb6834;
  --color-orange-600: #d95926;
  --color-teal-500:   #1baf7a;
  --color-teal-600:   #199e70;
  --color-yellow-500: #eda100;
  --color-yellow-600: #c98500;
  --color-pink-400:   #e87ba4;
  --color-pink-500:   #d55181;
}

/* ── LAYER 2 · SEMANTIC — light (default) ─────── */
:root {
  /* Text */
  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-500);
  --color-text-inverse:   var(--color-neutral-0);
  --color-text-brand:    var(--color-brand-600);

  /* Surfaces */
  --color-surface-page:    var(--color-neutral-0);
  --color-surface-card:    var(--color-neutral-0);
  --color-surface-sunken:  var(--color-neutral-50);
  --color-surface-hover:   var(--color-neutral-100);
  --color-surface-inverse: var(--color-neutral-900);

  /* Borders */
  --color-border-subtle:  var(--color-neutral-200);
  --color-border-default: var(--color-neutral-450);
  --color-border-strong:  var(--color-neutral-500);
  --color-border-focus:   var(--color-brand-500);

  /* Accent (interactive) */
  --color-brand:        var(--color-brand-500);
  --color-brand-hover:  var(--color-brand-600);
  --color-brand-active: var(--color-brand-700);
  --color-brand-soft:   var(--color-brand-50);
  --color-on-brand:     var(--color-neutral-0);
  --color-focus-ring:   0 0 0 3px var(--color-border-focus);

  /* Status */
  --color-success:      var(--color-green-600);
  --color-success-soft: var(--color-green-50);
  --color-warning:      var(--color-amber-700);
  --color-warning-soft: var(--color-amber-50);
  --color-danger:       var(--color-red-700);
  --color-danger-soft:  var(--color-red-50);

  /* Solid status surfaces are separate from status foregrounds so both themes
     keep normal text at 4.5:1 without changing the meaning of --color-success etc. */
  --color-success-solid: var(--color-green-600);
  --color-warning-solid: var(--color-amber-500);
  --color-danger-solid:  var(--color-red-500);

  /* On-status — corresponding *-solid surface text. All normal text pairs pass AA. */
  --color-on-danger:  var(--color-neutral-0);
  --color-on-success: var(--color-neutral-0);
  --color-on-warning: var(--color-neutral-900);

  /* Status icons on the inverse surface (toast). The inverse surface flips by theme. */
  --color-success-on-inverse: var(--color-green-400);
  --color-warning-on-inverse: var(--color-amber-400);
  --color-danger-on-inverse:  var(--color-red-400);

  /* Overlay — 모달·드로어 뒤 배경 딤. 테마와 무관하게 어두운 반투명 고정 */
  --color-surface-overlay: rgba(11, 13, 15, 0.45);

  /* Chart — 범주형 계열 5슬롯. 순서 고정(1→5), 계열이 5를 넘으면 "기타"로 묶거나 화면을 나눈다.
     상태색(success/warning/danger)을 계열색으로 재사용하지 않는다.
     카드 면 대비는 라이트·다크 모두 3:1 이상. 색만으로 계열을 구분시키지 말고
     직접 라벨·범례·표를 함께 두며, 맞닿는 조각 사이에는 카드 면 구분선을 둔다. */
  --color-chart-1: var(--color-brand-500);
  --color-chart-2: var(--color-orange-500);
  --color-chart-3: var(--color-teal-600);
  --color-chart-4: var(--color-yellow-600);
  --color-chart-5: var(--color-pink-500);
}

/* ── LAYER 2 · SEMANTIC — dark ──────────────────
   Only the semantic layer changes: same primitives,
   different steps. Set <html data-theme="dark">.   */
[data-theme="dark"] {
  --color-text-primary:   var(--color-neutral-100);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-muted:     var(--color-neutral-400);
  --color-text-inverse:   var(--color-neutral-900);
  --color-text-brand:    var(--color-brand-300);

  /* 다크 배경은 순흑이 아닌 900 — 순흑+밝은 글자는 halation으로 눈을 피로하게 한다 */
  --color-surface-page:    var(--color-neutral-900);
  --color-surface-card:    var(--color-neutral-800);
  --color-surface-sunken:  var(--color-neutral-950);
  --color-surface-hover:   var(--color-neutral-700);
  --color-surface-inverse: var(--color-neutral-0);

  --color-border-subtle:  var(--color-neutral-800);
  --color-border-default: var(--color-neutral-450);
  --color-border-strong:  var(--color-neutral-400);
  --color-border-focus:   var(--color-brand-400);

  --color-brand:        var(--color-brand-500);
  --color-brand-hover:  var(--color-brand-600);
  --color-brand-active: var(--color-brand-700);
  --color-brand-soft:   rgba(46, 106, 255, 0.16);
  --color-on-brand:     var(--color-neutral-0);
  --color-focus-ring:   0 0 0 3px var(--color-border-focus);
  --color-surface-overlay: rgba(0, 0, 0, 0.60);

  --color-success-soft: rgba(22, 163, 74, 0.16);
  --color-warning-soft: rgba(217, 119, 6, 0.16);
  --color-danger-soft:  rgba(220, 38, 38, 0.16);
  --color-success: var(--color-green-400);
  --color-warning: var(--color-amber-400);
  --color-danger:  var(--color-red-400);
  --color-success-on-inverse: var(--color-green-600);
  --color-warning-on-inverse: var(--color-amber-700);
  --color-danger-on-inverse:  var(--color-red-700);

  /* 다크 면용 계열 단계 — 같은 색상을 어두운 면에 맞춰 한 단계 조정(자동 반전 아님) */
  --color-chart-1: var(--color-brand-400);
  --color-chart-2: var(--color-orange-600);
  --color-chart-3: var(--color-teal-600);
  --color-chart-4: var(--color-yellow-600);
  --color-chart-5: var(--color-pink-500);
}