/* ============================================
   variables.css — Diground Design Tokens
   메인 컬러: 디그의 시그니처 터콰이즈 민트 (#2DDFC8)
   ============================================ */

:root {
  /* ── Brand Colors ── */
  /* 디그의 배경 터콰이즈 민트 = 브랜드 메인 컬러 */
  --color-primary:        #2DDFC8;   /* Dig Turquoise — brand primary */
  --color-primary-light:  #5EEADB;   /* lighter tint */
  --color-primary-dark:   #1AB8A6;   /* darker shade for hover/active */
  --color-primary-deeper: #0E9485;   /* very dark — text on mint bg */

  /* 서브 컬러 — 따뜻한 베이지/모래색 (디그 몸 색상에서 추출) */
  --color-sand:           #F5D9B8;   /* Dig's belly beige */
  --color-sand-dark:      #C4956A;   /* Dig's quill brown */

  /* 강조 컬러 — 흰 배경 위에서 민트와 대비되는 짙은 네이비 */
  --color-dark:           #0D2B27;   /* deep teal-black */
  --color-accent:         #FF6B6B;   /* Coral — CTA accent (온기 대비) */
  --color-accent-soft:    #FFB3A7;

  /* ── Neutrals ── */
  --color-white:          #FFFFFF;
  --color-bg:             #FFFFFF;
  --color-surface:        #F3FDFC;   /* 민트 극연하게 tint된 서피스 */
  --color-surface-2:      #E8FAF8;
  --color-border:         rgba(45, 223, 200, 0.15);
  --color-border-strong:  rgba(45, 223, 200, 0.30);
  --color-border-gray:    rgba(13, 43, 39, 0.10);
  --color-text-primary:   #0D2B27;   /* 깊은 틸-블랙 */
  --color-text-secondary: #3D6B66;   /* 중간 틸 */
  --color-text-muted:     #7AADA8;   /* 연한 틸 */

  /* ── Container ── */
  --container-max-width:  480px;
  --header-height:        56px;

  /* ── Shadows (민트 기반으로 교체) ── */
  --shadow-container:
    1px 0 0 0 rgba(45, 223, 200, 0.12),
    -1px 0 0 0 rgba(45, 223, 200, 0.12),
    0 0 32px rgba(45, 223, 200, 0.08);

  --shadow-header:
    0 1px 0 rgba(45, 223, 200, 0.15),
    0 4px 20px rgba(45, 223, 200, 0.08);

  --shadow-card:
    0 2px 12px rgba(13, 43, 39, 0.07),
    0 1px 3px rgba(13, 43, 39, 0.05);

  --shadow-card-hover:
    0 8px 32px rgba(45, 223, 200, 0.20),
    0 2px 8px rgba(13, 43, 39, 0.08);

  --shadow-sidebar:
    -8px 0 48px rgba(13, 43, 39, 0.16);

  --shadow-btn:
    0 4px 18px rgba(45, 223, 200, 0.45);

  --shadow-btn-dark:
    0 4px 18px rgba(13, 43, 39, 0.25);

  /* ── Border Radius ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Typography ── */
  --font-sans: 'Pretendard', 'Noto Sans KR', 'Inter', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', 'Inter', var(--font-sans);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Transitions ── */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ── Z-index scale ── */
  --z-base:    1;
  --z-header:  100;
  --z-overlay: 200;
  --z-sidebar: 300;
  --z-toast:   400;

  /* ── SNS Brand Colors ── */
  --color-kakao:    #FEE500;
  --color-kakao-fg: #191919;
  --color-naver:    #03C75A;
  --color-naver-fg: #FFFFFF;
  --color-google:   #FFFFFF;
  --color-google-fg:#0D2B27;
  --color-google-border: rgba(13,43,39,0.15);
  --color-instagram-start: #F58529;
  --color-instagram-mid:   #DD2A7B;
  --color-instagram-end:   #8134AF;
  --color-instagram-fg: #FFFFFF;
}