/* ============================================
   PETBALANCE — Design Tokens
   디자인 수정 시 이 파일만 편집하세요
   ============================================ */

:root {
  /* Brand Colors */
  --color-primary: #1B3A5C;        /* 메인 네이비 */
  --color-primary-light: #2A5280;
  --color-primary-dark: #0F2340;
  --color-accent: #C8202E;         /* 포인트 레드 */
  --color-accent-dark: #A01820;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-bg: #F7F8FA;
  --color-bg-section: #EEF1F5;
  --color-text: #1A1A2E;
  --color-text-sub: #6B7280;
  --color-text-light: #999999;
  --color-border: #E0E0E0;

  /* Accent surfaces */
  --color-warm: #F5F0E8;
  --color-green: #2E7D4F;

  /* Dark surfaces (footer, contact CTA) */
  --color-dark: #111827;
  --color-dark-text: rgba(255, 255, 255, 0.7);
  --color-dark-border: rgba(255, 255, 255, 0.1);

  /* Typography */
  --font-en: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-ko: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;

  --size-xs:   0.75rem;   /* 12px */
  --size-sm:   0.875rem;  /* 14px */
  --size-base: 1rem;      /* 16px */
  --size-md:   1.125rem;  /* 18px */
  --size-lg:   1.5rem;    /* 24px */
  --size-xl:   2rem;      /* 32px */
  --size-2xl:  2.5rem;    /* 40px */
  --size-3xl:  3.5rem;    /* 56px */
  --size-hero: clamp(2.5rem, 5vw, 4.5rem);

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;

  /* Layout */
  --nav-height: 70px;
  --max-width: 1280px;
  --section-padding: 0 5%;

  /* Z-index layers */
  --z-nav: 1000;
  --z-hamburger: 1001;
  --z-mega: 999;
  --z-side-nav: 500;

  /* Animation */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 0.3s var(--ease-out);
  --transition-slow: 0.7s var(--ease-out);

  /* Shadow */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.14);
  --shadow-nav: 0 2px 16px rgba(0,0,0,0.08);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-full: 9999px;
}