/* COCO 디자인 토큰 — 베트남 트로피컬 × 럭셔리 미니멀 */
:root {
  /* Color */
  --coco-bg: #F8F4EC;          /* 코코넛 화이트 */
  --coco-bg-warm: #F2EBDA;     /* 따뜻한 모래 */
  --coco-paper: #FAF7EF;
  --coco-ink: #1A1A1A;
  --coco-ink-soft: #3A2F1A;
  --coco-mute: #8B7E66;
  --coco-line: rgba(26, 26, 26, 0.10);
  --coco-line-strong: rgba(26, 26, 26, 0.18);
  --coco-palm: #1F4E3D;        /* 야자 그린 */
  --coco-palm-deep: #163729;
  --coco-gold: #C9A961;        /* 골드 */
  --coco-gold-deep: #A6873F;
  --coco-coral: #E8746A;       /* 산호 */
  --coco-coral-soft: #F2A89F;

  /* Type */
  --ff-serif: 'Cormorant Garamond', 'Playfair Display', 'Noto Serif KR', serif;
  --ff-display: 'Playfair Display', 'Cormorant Garamond', serif;
  --ff-sans: 'Pretendard', -apple-system, 'Inter', 'Noto Sans KR', sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --pad: clamp(20px, 4vw, 64px);
  --pad-section: clamp(56px, 9vw, 140px);
  --maxw: 1320px;
  --maxw-text: 720px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadow */
  --sh-card: 0 1px 0 rgba(26,26,26,.04), 0 18px 40px -28px rgba(26,26,26,.18);
  --sh-pop: 0 24px 60px -20px rgba(26,26,26,.24);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto-dark {
    --coco-bg: #14110B;
    --coco-bg-warm: #1B1812;
    --coco-paper: #17140F;
    --coco-ink: #F2EBDA;
    --coco-ink-soft: #C9BFA5;
    --coco-line: rgba(242,235,218,.10);
    --coco-line-strong: rgba(242,235,218,.20);
  }
}