/**
 * 컬러 가이드 - 나나성형외과 클리닉
 *
 * vibeprs.com의 컬러 스킴을 참고하여 생성
 * 브랜드 아이덴티티를 유지하면서 깔끔하고 모던한 UI를 위한 컬러 시스템
 */

:root {
  /* ========================================
     PRIMARY BRAND COLORS (메인 브랜드 컬러)
     ======================================== */

  /* 나나성형외과 브랜드 컬러 - 브라운 톤 */
  --color-brand-primary: #a0a3ff;          /* 메인 브랜드 컬러 */
  --color-brand-primary-dark: #8e5c48;     /* 다크 브랜드 컬러 */
  --color-brand-primary-darker: #a0a3ff;   /* 더 진한 브랜드 컬러 */
  --color-brand-primary-light: #bca35f;    /* 밝은 브랜드 컬러 */

  /* vibeprs.com 스타일 - 라벤더/퍼플 액센트 */
  --color-accent-purple: #a0a3ff;          /* 라벤더 액센트 (CTA, 버튼) */
  --color-accent-purple-light: #cfe1ff;    /* 밝은 퍼플 */
  --color-accent-purple-dark: #80a7ff;     /* 진한 퍼플 */


  /* ========================================
     SECONDARY COLORS (보조 컬러)
     ======================================== */

  /* Teal/Aqua 계열 (기존 나나 보조 컬러) */
  --color-secondary-teal: #4ec9bc;         /* 틸 메인 */
  --color-secondary-teal-light: #4fe0c5;   /* 밝은 틸 */
  --color-secondary-teal-dark: #a0a3ff;    /* 진한 틸 */
  --color-secondary-aqua: #4bbdcf;         /* 아쿠아 */

  /* Green 계열 */
  --color-secondary-green: #3fc628;        /* 그린 */
  --color-secondary-green-light: #44d362;  /* 밝은 그린 */


  /* ========================================
     NEUTRAL COLORS (중립 컬러)
     ======================================== */

  /* Grayscale - vibeprs.com 참고 */
  --color-neutral-white: #ffffff;          /* 순백 */
  --color-neutral-black: #000000;          /* 순흑 */

  /* Dark Grays */
  --color-neutral-gray-900: #111111;       /* 거의 블랙 */
  --color-neutral-gray-800: #1c1c1c;       /* 다크 그레이 */
  --color-neutral-gray-700: #272625;       /* 진한 그레이 */
  --color-neutral-gray-600: #333333;       /* 다크 텍스트 (vibeprs.com) */
  --color-neutral-gray-500: #666666;       /* 미드 그레이 */

  /* Light Grays */
  --color-neutral-gray-400: #999999;       /* 라이트 미드 그레이 */
  --color-neutral-gray-300: #aaaaaa;       /* 뮤트 그레이 (vibeprs.com) */
  --color-neutral-gray-200: #cccccc;       /* 라이트 그레이 (vibeprs.com) */
  --color-neutral-gray-100: #e5e5e5;       /* 매우 밝은 그레이 */
  --color-neutral-gray-50: #f9f9f9;        /* 거의 화이트 */


  /* ========================================
     TEXT COLORS (텍스트 컬러)
     ======================================== */

  --color-text-primary: #000000;           /* 메인 텍스트 */
  --color-text-secondary: #333333;         /* 보조 텍스트 */
  --color-text-muted: #aaaaaa;             /* 뮤트 텍스트 */
  --color-text-on-dark: #ffffff;           /* 다크 배경 위 텍스트 */
  --color-text-link: #a0a3ff;              /* 링크 텍스트 (vibeprs.com) */
  --color-text-link-hover: #8088e0;        /* 링크 호버 */


  /* ========================================
     BACKGROUND COLORS (배경 컬러)
     ======================================== */

  --color-bg-primary: #ffffff;             /* 메인 배경 */
  --color-bg-secondary: #f9f9f9;           /* 보조 배경 */
  --color-bg-tertiary: #efefef;            /* 3차 배경 */
  --color-bg-dark: #1c1c1c;                /* 다크 배경 */

  /* Overlay */
  --color-overlay-dark: rgba(0, 0, 0, 0.4);    /* 다크 오버레이 (vibeprs.com) */
  --color-overlay-light: rgba(255, 255, 255, 0.8);  /* 라이트 오버레이 */


  /* ========================================
     UI ELEMENT COLORS (UI 요소 컬러)
     ======================================== */

  /* Buttons */
  --color-button-primary-bg: #a0a3ff;          /* 메인 버튼 배경 (vibeprs.com) */
  --color-button-primary-text: #ffffff;        /* 메인 버튼 텍스트 */
  --color-button-primary-hover: #8088e0;       /* 메인 버튼 호버 */

  --color-button-secondary-bg: #a0a3ff;        /* 보조 버튼 (브랜드 컬러) */
  --color-button-secondary-text: #ffffff;      /* 보조 버튼 텍스트 */
  --color-button-secondary-hover: #8e5c48;     /* 보조 버튼 호버 */

  --color-button-outline-border: #a0a3ff;      /* 아웃라인 버튼 테두리 */
  --color-button-outline-text: #a0a3ff;        /* 아웃라인 버튼 텍스트 */
  --color-button-outline-hover-bg: #a0a3ff;    /* 아웃라인 버튼 호버 배경 */

  /* Borders */
  --color-border-light: #e5e5e5;           /* 밝은 테두리 */
  --color-border-medium: #cccccc;          /* 중간 테두리 */
  --color-border-dark: #999999;            /* 진한 테두리 */

  /* Pagination */
  --color-pagination-inactive: #cccccc;    /* 비활성 페이지네이션 (vibeprs.com) */
  --color-pagination-active-bg: #333333;   /* 활성 페이지네이션 배경 (vibeprs.com) */
  --color-pagination-active-text: #ffffff; /* 활성 페이지네이션 텍스트 */


  /* ========================================
     STATUS COLORS (상태 컬러)
     ======================================== */

  --color-status-success: #3fc628;         /* 성공 */
  --color-status-warning: #ffc160;         /* 경고 */
  --color-status-error: #ff2731;           /* 에러 */
  --color-status-info: #4bbdcf;            /* 정보 */


  /* ========================================
     SHADOWS (그림자)
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);


  /* ========================================
     TRANSITIONS (트랜지션)
     ======================================== */

  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}


/* ========================================
   USAGE EXAMPLES (사용 예시)
   ======================================== */

/*
  Primary Button:
  background-color: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);

  Secondary Button:
  background-color: var(--color-button-secondary-bg);
  color: var(--color-button-secondary-text);

  Text:
  color: var(--color-text-primary);

  Link:
  color: var(--color-text-link);

  Background:
  background-color: var(--color-bg-primary);

  Border:
  border: 1px solid var(--color-border-medium);

  Shadow:
  box-shadow: var(--shadow-md);

  Transition:
  transition: all var(--transition-base);
*/