/**
 * ADONG HOMEPAGE - COLOR SYSTEM
 * 60-30-10 Color Harmony with Purple Theme
 * 황금비율 기반 디자인 시스템
 */

:root {
  /* ==========================================
   * 60% - NEUTRAL BASE COLORS (무채색)
   * ========================================== */

  /* Pure Neutrals */
  --neutral-white: #FFFFFF;
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-black: #000000;

  /* Semantic Neutral Applications */
  --color-surface-primary: var(--neutral-white);
  --color-surface-secondary: var(--neutral-50);
  --color-surface-tertiary: var(--neutral-100);
  --color-surface-elevated: var(--neutral-white);
  --color-surface-overlay: rgba(23, 23, 23, 0.4);

  /* Background Primary - ADDED TO FIX VISIBILITY ISSUE */
  --color-bg-primary: var(--neutral-white);

  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-text-tertiary: var(--neutral-500);
  --color-text-inverse: var(--neutral-white);
  --color-text-muted: var(--neutral-400);

  --color-border-light: var(--neutral-200);
  --color-border-medium: var(--neutral-300);
  --color-border-strong: var(--neutral-400);

  /* ==========================================
   * 30% - SECONDARY COLORS (연보라 베이스)
   * ========================================== */

  /* Light Purple Tones */
  --purple-50: #FAFAFA;    /* 극연한 배경 */
  --purple-100: #F0EBF8;   /* 메인 30% 색상 */
  --purple-200: #E6D8F2;   /* 조금 더 진한 톤 */
  --purple-300: #D4BFE8;   /* 중간 톤 */
  --purple-400: #C1A1DE;   /* 약간 진한 톤 */

  /* Semantic Secondary Applications */
  --color-secondary-lightest: var(--purple-50);
  --color-secondary-light: var(--purple-100);
  --color-secondary-medium: var(--purple-200);
  --color-secondary-strong: var(--purple-300);
  --color-secondary-stronger: var(--purple-400);

  /* Background Variations */
  --color-bg-secondary: var(--purple-100);
  --color-bg-soft: var(--purple-50);
  --color-bg-accent-light: var(--purple-200);

  /* ==========================================
   * 10% - PRIMARY ACCENT COLORS (포인트 컬러)
   * ========================================== */

  /* Main Purple Accent Colors */
  --primary-dark: #50328C;      /* 진보라 - 메인 브랜드 */
  --primary-medium: #7B5CB0;    /* 중간보라 - ADoong_Violet_2 대체 */
  --primary-light: #AA96FA;     /* 밝은보라 - 액센트 */

  /* Extended Primary Palette */
  --primary-darker: #3D2568;    /* 더 진한 버전 */
  --primary-lighter: #C4B8FB;   /* 더 밝은 버전 */

  /* Semantic Primary Applications */
  --color-primary: var(--primary-dark);
  --color-primary-hover: var(--primary-darker);
  --color-primary-light: var(--primary-light);
  --color-primary-medium: var(--primary-medium);

  /* Interactive States */
  --color-interactive-primary: var(--primary-dark);
  --color-interactive-primary-hover: var(--primary-darker);
  --color-interactive-primary-active: var(--primary-darker);
  --color-interactive-primary-disabled: var(--neutral-300);

  /* ==========================================
   * FEEDBACK & STATUS COLORS
   * ========================================== */

  /* Success */
  --color-success: #16A34A;
  --color-success-light: #DCFCE7;
  --color-success-dark: #15803D;

  /* Warning */
  --color-warning: #D97706;
  --color-warning-light: #FEF3C7;
  --color-warning-dark: #B45309;

  /* Error */
  --color-error: #DC2626;
  --color-error-light: #FEE2E2;
  --color-error-dark: #B91C1C;

  /* Info */
  --color-info: var(--primary-medium);
  --color-info-light: var(--purple-100);
  --color-info-dark: var(--primary-dark);

  /* ==========================================
   * SHADOW SYSTEM
   * ========================================== */

  --shadow-xs: 0 1px 2px 0 rgba(23, 23, 23, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(23, 23, 23, 0.1), 0 1px 2px -1px rgba(23, 23, 23, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(23, 23, 23, 0.1), 0 2px 4px -2px rgba(23, 23, 23, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(23, 23, 23, 0.1), 0 4px 6px -4px rgba(23, 23, 23, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(23, 23, 23, 0.1), 0 8px 10px -6px rgba(23, 23, 23, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(23, 23, 23, 0.25);

  /* Colored Shadows */
  --shadow-primary: 0 4px 14px 0 rgba(80, 50, 140, 0.15);
  --shadow-primary-lg: 0 10px 25px 0 rgba(80, 50, 140, 0.2);

  /* ==========================================
   * GRADIENT SYSTEM
   * ========================================== */

  /* Primary Gradients */
  --gradient-primary: linear-gradient(315deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
  --gradient-primary-light: linear-gradient(315deg, var(--primary-medium) 0%, var(--primary-light) 100%);
  --gradient-primary-subtle: linear-gradient(315deg, var(--purple-100) 0%, var(--purple-200) 100%);

  /* Background Gradients */
  --gradient-bg-soft: linear-gradient(315deg, var(--neutral-white) 0%, var(--purple-50) 100%);
  --gradient-bg-accent: linear-gradient(315deg, var(--purple-50) 0%, var(--purple-100) 100%);

  /* ==========================================
   * OPACITY SYSTEM
   * ========================================== */

  --opacity-disabled: 0.38;
  --opacity-secondary: 0.6;
  --opacity-hint: 0.87;
  --opacity-overlay: 0.4;
  --opacity-backdrop: 0.5;

  /* ==========================================
   * Z-INDEX SYSTEM
   * ========================================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* ==========================================
 * DARK MODE SUPPORT (Optional)
 * ========================================== */
/* Dark mode disabled - using light mode only */

/* ==========================================
 * COLOR UTILITIES
 * ========================================== */

.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-tertiary { color: var(--color-text-tertiary) !important; }
.text-inverse { color: var(--color-text-inverse) !important; }
.text-muted { color: var(--color-text-muted) !important; }

.text-brand { color: var(--color-primary) !important; }
.text-brand-light { color: var(--color-primary-light) !important; }

.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }
.text-info { color: var(--color-info) !important; }

.bg-primary { background-color: var(--color-surface-primary) !important; }
.bg-secondary { background-color: var(--color-surface-secondary) !important; }
.bg-tertiary { background-color: var(--color-surface-tertiary) !important; }
.bg-brand { background-color: var(--color-primary) !important; }
.bg-brand-light { background-color: var(--color-primary-light) !important; }

.bg-success { background-color: var(--color-success-light) !important; }
.bg-warning { background-color: var(--color-warning-light) !important; }
.bg-error { background-color: var(--color-error-light) !important; }
.bg-info { background-color: var(--color-info-light) !important; }