/* ==========================================================================
   Design System - Colors
   모든 색상은 이 변수들을 사용해야 합니다.

   Rule: every :root --color-* MUST have a paired html.dark {} value below
   (same file). Exceptions: primary brand values that look identical in both
   themes (e.g. --color-primary).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     Primary Colors - 브랜드 색상
     --------------------------------------------------------------------------- */
  --color-primary: #007AFF;
  --color-primary-hover: #0056CC;
  --color-primary-light: #E3F2FD;

  /* ---------------------------------------------------------------------------
     Text Colors - 텍스트 색상
     --------------------------------------------------------------------------- */
  --color-text-primary: #2D2D2D;
  --color-text-secondary: #8D8A86;
  --color-text-muted: #8D8A86;
  --color-text-inverse: #FFFFFF;
  --color-fill-dark: #2D2D2D;

  /* ---------------------------------------------------------------------------
     Background Colors - 배경 색상
     --------------------------------------------------------------------------- */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #E8E8E8;
  /* --color-bg-white: **background only**. This token flips to #121212 in
     dark mode (see html.dark block). Do NOT use for text / stroke / fill —
     use --color-text-inverse (#FFFFFF locked both themes) instead. */
  --color-bg-white: #FFFFFF;
  --color-card-fill: #F7F7F5;
  --color-card-fill-active: #EEEEEC;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  --color-bg-glass: rgba(255, 255, 255, 0.9);
  --color-bg-glass-light: rgba(255, 255, 255, 0.35);
  --color-bg-glass-card: rgba(255, 255, 255, 0.75);

  /* ---------------------------------------------------------------------------
     Border Colors - 테두리 색상
     --------------------------------------------------------------------------- */
  --color-border-soft: #E0E0DE;
  --color-border-light: #FFFFFF;
  --color-glass-border: #FFFFFF;

  /* ---------------------------------------------------------------------------
     State Colors - 상태 색상
     --------------------------------------------------------------------------- */
  --color-success: #22C55E;
  --color-success-light: #DCFCE7;
  --color-warning: #EE3124;
  --color-warning-light: #FEE2E2;
  --color-danger: #EF4444;
  --color-danger-light: #FEE2E2;
  --color-info: #4A90D9;
  --color-info-light: #E3F2FD;

  /* ---------------------------------------------------------------------------
     Accent Colors - 강조 색상
     --------------------------------------------------------------------------- */
  --color-accent-red: #FF3B30;
  --color-accent-blue: #4A90D9;
  --color-accent-orange: #FF6B35;
  --color-accent-orange-light: rgba(255, 107, 53, 0.1);
  --color-accent-purple: #9C27B0;
  --color-accent-purple-light: #F3E5F5;
  --color-accent-green: #4CAF50;

  /* ---------------------------------------------------------------------------
     Caution Colors - 주의 색상 (amber)
     --------------------------------------------------------------------------- */
  --color-caution: #D97706;
  --color-caution-light: #FEF3C7;
  --color-caution-text: #92400E;
  --color-caution-border: #FDE68A;

  /* ---------------------------------------------------------------------------
     Additional State Shades
     --------------------------------------------------------------------------- */
  --color-danger-text: #DC2626;
  --color-danger-border: #FECACA;
  --color-danger-bg: #FFEBEE;
  --color-success-text: #2E7D32;
  --color-success-bg: #E8F5E9;
  --color-warning-icon: #FF9800;

  /* Focus ring color (keyboard :focus-visible) */
  --color-focus-ring: var(--color-text-primary);

  /* ---------------------------------------------------------------------------
     Gray Shades - 그레이 색상
     --------------------------------------------------------------------------- */
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E0E0E0;
  --color-gray-900: #000000;

  /* ---------------------------------------------------------------------------
     Avatar/Profile - 아바타 관련 색상
     --------------------------------------------------------------------------- */
  --color-avatar-gradient: #ECEBE8;
  --color-avatar-gradient-start: #ECEBE8;
  --color-avatar-gradient-end: #ECEBE8;
  --color-avatar-placeholder: #D4D4D4;
  --color-avatar-text: var(--color-text-secondary);
  --color-warning-subtle: #FFF7ED;

  /* Avatar Placeholder Colors - 아바타 이니셜 배경 색상 */
  --color-avatar-pink: #FFB6C1;
  --color-avatar-mint: #98D8C8;
  --color-avatar-yellow: #F7DC6F;
  --color-avatar-purple: #BB8FCE;
  --color-avatar-blue: #85C1E9;

  /* ---------------------------------------------------------------------------
     Overlay Colors - 오버레이 색상
     --------------------------------------------------------------------------- */
  --color-overlay-dark: rgba(0, 0, 0, 0.6);
  --color-overlay-light: rgba(255, 255, 255, 0.9);
  --color-hover-subtle: rgba(0, 0, 0, 0.05);
  --color-badge-bg: rgba(0, 0, 0, 0.1);
  --color-badge-bg-inverted: rgba(255, 255, 255, 0.2);
  --color-danger-subtle: rgba(239, 68, 68, 0.1);
  --color-warning-subtle-bg: rgba(255, 100, 23, 0.08);
  --color-warning-hover-bg: rgba(255, 100, 23, 0.15);
  --color-warning-shadow: rgba(255, 100, 23, 0.2);
  --color-warning-border: rgba(255, 100, 23, 0.3);
  --color-notification-unread: rgba(255, 100, 23, 0.05);
  --color-selection-subtle: rgba(39, 40, 43, 0.08);

  /* ---------------------------------------------------------------------------
     Project Surface - 프로젝트 카드 배경 (중립 톤)
     --------------------------------------------------------------------------- */
  --color-project-purple: #ECEBE8;   /* used by planner_item.css, progress_bar.css */
  --color-project-gradient: #ECEBE8; /* used by planner_item.css, planner_card.css, task.css, project_recommendations.css */

  /* ---------------------------------------------------------------------------
     Premium Colors - 프리미엄 CTA 색상
     --------------------------------------------------------------------------- */
  --color-premium-gradient: linear-gradient(135deg, #F5F5F5 0%, #E8E8E8 50%, #D4D4D4 100%);
  --color-premium-accent: #1A1A1A;
  --color-premium-accent-subtle: rgba(0, 0, 0, 0.08);
  --color-premium-title: #0A0A0A;
  --color-premium-desc: #404040;

  /* ---------------------------------------------------------------------------
     Legacy Aliases
     @deprecated — migrate callsites to the --color-* equivalents. These exist
     only to keep existing CSS and a few ERB icon strokes working. They flip
     correctly in dark mode because they reference the new tokens.
     Current callsites (remove when 0):
       --text-sub              → var(--color-text-secondary)
       --text-main             → var(--color-text-primary)
       --together-warning      → var(--color-warning)
     --------------------------------------------------------------------------- */
  --bg-main: var(--color-bg-primary);
  --bg-card: var(--color-bg-secondary);
  --border-soft: var(--color-border-soft);
  --text-main: var(--color-text-primary);
  --text-sub: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --white: var(--color-bg-white);
  --accent-red: var(--color-accent-red);
  --accent-blue: var(--color-accent-blue);
  --together-avatar-gradient: var(--color-avatar-gradient);
  --together-warning: var(--color-warning);
}

/* ==========================================================================
   Dark Mode Overrides
   Every color token above should have a paired value here — either an
   explicit override or an inherited primitive.
   ========================================================================== */

html.dark {
  /* Text Colors */
  --color-text-primary: #F0EDE8;
  --color-text-secondary: #9C9895;
  --color-text-muted: #6B6764;
  --color-text-inverse: #FFFFFF;
  --color-fill-dark: #2A2A2A;

  /* Background Colors */
  --color-bg-primary: #121212;
  --color-bg-secondary: #121212;
  --color-bg-tertiary: #2A2A2A;
  --color-bg-white: #121212;
  --color-card-fill: #1A1A1A;
  --color-card-fill-active: #222222;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);
  --color-bg-glass: rgba(30, 30, 30, 0.92);
  --color-bg-glass-light: rgba(255, 255, 255, 0.06);
  --color-bg-glass-card: rgba(30, 30, 30, 0.85);

  /* Border Colors */
  --color-border-soft: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.06);
  --color-glass-border: rgba(255, 255, 255, 0.06);

  /* State Colors (brighter for dark backgrounds) */
  --color-success: #4ADE80;
  --color-success-light: rgba(74, 222, 128, 0.15);
  --color-danger: #F87171;
  --color-danger-light: rgba(248, 113, 113, 0.15);
  --color-danger-text: #F87171;
  --color-danger-border: rgba(248, 113, 113, 0.3);
  --color-danger-bg: rgba(248, 113, 113, 0.1);
  --color-success-text: #86EFAC;
  --color-success-bg: rgba(74, 222, 128, 0.1);
  --color-warning: #EE3124;
  --color-warning-light: rgba(238, 49, 36, 0.15);
  --color-warning-icon: #FB923C;
  --color-info: #6BA8E8;
  --color-info-light: rgba(107, 168, 232, 0.15);

  /* Accent Colors (brightened for dark bg) */
  --color-accent-red: #FF6B5E;
  --color-accent-blue: #6BA8E8;
  --color-accent-orange: #FF8757;
  --color-accent-orange-light: rgba(255, 107, 53, 0.15);
  --color-accent-purple: #C77DD7;
  --color-accent-purple-light: rgba(199, 125, 215, 0.15);
  --color-accent-green: #68D48F;

  /* Caution (amber) on dark bg */
  --color-caution: #FBBF24;
  --color-caution-light: #422006;
  --color-caution-text: #FCD34D;
  --color-caution-border: rgba(251, 191, 36, 0.3);

  /* Gray Shades */
  --color-gray-100: #2A2A2A;
  --color-gray-200: #3A3A3A;
  --color-gray-900: #F0EDE8;

  /* Avatar */
  --color-avatar-gradient: #3A3A3A;
  --color-avatar-gradient-start: #3A3A3A;
  --color-avatar-gradient-end: #3A3A3A;
  --color-avatar-placeholder: #3A3A3A;
  --color-avatar-text: var(--color-text-secondary);
  --color-warning-subtle: rgba(255, 135, 87, 0.08);

  /* Avatar placeholder initials — muted on dark */
  --color-avatar-pink: #8F5A66;
  --color-avatar-mint: #4E7A71;
  --color-avatar-yellow: #8A7A3E;
  --color-avatar-purple: #6B5279;
  --color-avatar-blue: #4E7690;

  /* Overlays */
  --color-overlay-dark: rgba(0, 0, 0, 0.75);
  --color-overlay-light: rgba(30, 30, 30, 0.9);
  --color-hover-subtle: rgba(255, 255, 255, 0.05);
  --color-badge-bg: rgba(255, 255, 255, 0.1);
  --color-badge-bg-inverted: rgba(0, 0, 0, 0.4);
  --color-danger-subtle: rgba(248, 113, 113, 0.15);
  --color-warning-subtle-bg: rgba(255, 135, 87, 0.1);
  --color-warning-hover-bg: rgba(255, 135, 87, 0.18);
  --color-warning-shadow: rgba(255, 135, 87, 0.25);
  --color-warning-border: rgba(255, 135, 87, 0.35);
  --color-notification-unread: rgba(255, 135, 87, 0.08);
  --color-selection-subtle: rgba(255, 255, 255, 0.08);

  /* Project Surface */
  --color-project-purple: #2A2A2A;
  --color-project-gradient: #2A2A2A;

  /* Premium Colors — dark card with light text */
  --color-premium-gradient: linear-gradient(135deg, #2A2A2A 0%, #222222 50%, #1A1A1A 100%);
  --color-premium-accent: #F0EDE8;
  --color-premium-accent-subtle: rgba(255, 255, 255, 0.1);
  --color-premium-title: #F0EDE8;
  --color-premium-desc: #9C9895;
}