/* Memovia Brand Colors */
:root {
  color-scheme: light dark;
  /* Primary Colors */
  --memovia-primary: #2563eb;      /* 메인 블루 (두뇌) */
  --memovia-primary-dark: #1d4ed8; /* 다크 블루 */
  --memovia-primary-light: #3b82f6; /* 라이트 블루 */
  --memovia-on-primary: #ffffff;
  
  /* Secondary Colors */
  --memovia-ai: #10b981;           /* AI 그린 */
  --memovia-ai-dark: #059669;      /* 다크 그린 */
  --memovia-ai-light: #34d399;     /* 라이트 그린 */
  
  /* Accent Colors */
  --memovia-accent: #f59e0b;       /* 오렌지 (에너지) */
  --memovia-accent-dark: #d97706;  /* 다크 오렌지 */
  
  /* Neutral Colors */
  --memovia-text-strong: #0f172a;  /* 강조 텍스트 */
  --memovia-text: #1f2937;         /* 메인 텍스트 */
  --memovia-text-light: #6b7280;   /* 라이트 텍스트 */
  --memovia-text-soft: #334155;    /* 보조 텍스트 */
  --memovia-text-muted: #9ca3af;   /* 뮤티드 텍스트 */
  
  /* Background Colors */
  --memovia-bg: #ffffff;           /* 메인 배경 */
  --memovia-bg-light: #f8fafc;     /* 라이트 배경 */
  --memovia-bg-dark: #f1f5f9;      /* 다크 배경 */
  --memovia-surface: #ffffff;      /* 기본 표면 */
  --memovia-surface-elevated: #ffffff; /* 떠있는 표면 */
  --memovia-surface-subtle: #fafafa; /* 옅은 표면 */
  --memovia-surface-muted: #f8fafc; /* 보조 표면 */
  --memovia-surface-strong: #f1f5f9; /* 강조 배경 */
  --memovia-primary-soft: #eff6ff; /* primary tint */
  --memovia-primary-soft-strong: #dbeafe; /* stronger primary tint */
  --memovia-warning-soft: #fffbeb;
  --memovia-danger-soft: #fef2f2;
  
  /* Border Colors */
  --memovia-border: #e5e7eb;       /* 기본 보더 */
  --memovia-border-light: #f3f4f6; /* 라이트 보더 */
  --memovia-border-strong: #cbd5e1; /* 강조 보더 */
  
  /* Elevation */
  --memovia-shadow-card: 0 6px 16px rgba(15, 23, 42, 0.06);
  --memovia-shadow-popover: 0 16px 38px rgba(15, 23, 42, 0.12), 0 3px 10px rgba(15, 23, 42, 0.06);
  --memovia-shadow-modal: 0 24px 48px rgba(15, 23, 42, 0.24);
  --memovia-shadow-header: 0 2px 10px rgba(15, 23, 42, 0.08);
  --memovia-shadow-sidebar: 0 12px 28px rgba(15, 23, 42, 0.1);
  --memovia-shadow-primary: 0 6px 14px rgba(37, 99, 235, 0.25);
  --memovia-shadow-ai: 0 6px 14px rgba(16, 185, 129, 0.35);
  --memovia-shadow-mobile-bar: 0 -8px 20px rgba(15, 23, 42, 0.06);
  --memovia-overlay-bg: rgba(15, 23, 42, 0.45);
  --memovia-divider-fade: linear-gradient(90deg, rgba(226, 232, 240, 0) 0%, #e2e8f0 14%, #e2e8f0 86%, rgba(226, 232, 240, 0) 100%);
  --memovia-backdrop-blur: saturate(180%) blur(8px);
  --memovia-interactive-hover: rgba(15, 23, 42, 0.05);
  
  /* Radius */
  --memovia-radius-sm: 8px;
  --memovia-radius-md: 10px;
  --memovia-radius-lg: 12px;
  --memovia-radius-xl: 16px;
  --memovia-radius-pill: 9999px;
  
  /* Status Colors */
  --memovia-success: #10b981;      /* 성공 */
  --memovia-success-dark: #059669;
  --memovia-warning: #f59e0b;      /* 경고 */
  --memovia-error: #ef4444;        /* 에러 */
  --memovia-error-dark: #dc2626;
  --memovia-info: #3b82f6;         /* 정보 */
}

/* Dark Mode Colors */
:root[data-theme="dark"] {
  --memovia-text-strong: #f8fafc;
  --memovia-text: #e5e7eb;
  --memovia-text-light: #d1d5db;
  --memovia-text-soft: #cbd5e1;
  --memovia-text-muted: #9ca3af;
  --memovia-bg: #0b1220;
  --memovia-bg-light: #111827;
  --memovia-bg-dark: #1f2937;
  --memovia-surface: #111827;
  --memovia-surface-elevated: #162033;
  --memovia-surface-subtle: #182131;
  --memovia-surface-muted: #1e293b;
  --memovia-surface-strong: #334155;
  --memovia-primary-soft: rgba(37, 99, 235, 0.18);
  --memovia-primary-soft-strong: rgba(59, 130, 246, 0.24);
  --memovia-warning-soft: rgba(245, 158, 11, 0.18);
  --memovia-danger-soft: rgba(239, 68, 68, 0.18);
  --memovia-border: #334155;
  --memovia-border-light: #475569;
  --memovia-border-strong: #64748b;
  --memovia-shadow-card: 0 12px 30px rgba(2, 6, 23, 0.34);
  --memovia-shadow-popover: 0 18px 40px rgba(2, 6, 23, 0.48);
  --memovia-shadow-modal: 0 28px 60px rgba(2, 6, 23, 0.58);
  --memovia-shadow-header: 0 8px 22px rgba(2, 6, 23, 0.34);
  --memovia-shadow-sidebar: 0 20px 44px rgba(2, 6, 23, 0.42);
  --memovia-shadow-primary: 0 8px 20px rgba(37, 99, 235, 0.34);
  --memovia-shadow-ai: 0 8px 20px rgba(16, 185, 129, 0.28);
  --memovia-shadow-mobile-bar: 0 -12px 28px rgba(2, 6, 23, 0.32);
  --memovia-overlay-bg: rgba(2, 6, 23, 0.68);
  --memovia-divider-fade: linear-gradient(90deg, rgba(100, 116, 139, 0) 0%, rgba(100, 116, 139, 0.68) 14%, rgba(100, 116, 139, 0.68) 86%, rgba(100, 116, 139, 0) 100%);
  --memovia-interactive-hover: rgba(148, 163, 184, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --memovia-text-strong: #f8fafc;
    --memovia-text: #e5e7eb;
    --memovia-text-light: #d1d5db;
    --memovia-text-soft: #cbd5e1;
    --memovia-text-muted: #9ca3af;
    --memovia-bg: #0b1220;
    --memovia-bg-light: #111827;
    --memovia-bg-dark: #1f2937;
    --memovia-surface: #111827;
    --memovia-surface-elevated: #162033;
    --memovia-surface-subtle: #182131;
    --memovia-surface-muted: #1e293b;
    --memovia-surface-strong: #334155;
    --memovia-primary-soft: rgba(37, 99, 235, 0.18);
    --memovia-primary-soft-strong: rgba(59, 130, 246, 0.24);
    --memovia-warning-soft: rgba(245, 158, 11, 0.18);
    --memovia-danger-soft: rgba(239, 68, 68, 0.18);
    --memovia-border: #334155;
    --memovia-border-light: #475569;
    --memovia-border-strong: #64748b;
    --memovia-shadow-card: 0 12px 30px rgba(2, 6, 23, 0.34);
    --memovia-shadow-popover: 0 18px 40px rgba(2, 6, 23, 0.48);
    --memovia-shadow-modal: 0 28px 60px rgba(2, 6, 23, 0.58);
    --memovia-shadow-header: 0 8px 22px rgba(2, 6, 23, 0.34);
    --memovia-shadow-sidebar: 0 20px 44px rgba(2, 6, 23, 0.42);
    --memovia-shadow-primary: 0 8px 20px rgba(37, 99, 235, 0.34);
    --memovia-shadow-ai: 0 8px 20px rgba(16, 185, 129, 0.28);
    --memovia-shadow-mobile-bar: 0 -12px 28px rgba(2, 6, 23, 0.32);
    --memovia-overlay-bg: rgba(2, 6, 23, 0.68);
    --memovia-divider-fade: linear-gradient(90deg, rgba(100, 116, 139, 0) 0%, rgba(100, 116, 139, 0.68) 14%, rgba(100, 116, 139, 0.68) 86%, rgba(100, 116, 139, 0) 100%);
    --memovia-interactive-hover: rgba(148, 163, 184, 0.14);
  }
}

/* Utility Classes */
.text-primary { color: var(--memovia-primary); }
.text-ai { color: var(--memovia-ai); }
.text-accent { color: var(--memovia-accent); }

.bg-primary { background-color: var(--memovia-primary); }
.bg-ai { background-color: var(--memovia-ai); }
.bg-accent { background-color: var(--memovia-accent); }

.border-primary { border-color: var(--memovia-primary); }
.border-ai { border-color: var(--memovia-ai); }
.border-accent { border-color: var(--memovia-accent); }