/* 비치움최강클린즈 — 디자인 토큰
 * 톤: 민트/터키석(청결+신뢰) + 딥블루(전문성) + 코랄(긴급/특수청소 액센트)
 * 폰트: Pretendard(본문/헤딩) + Black Han Sans(임팩트) + Gmarket Sans(보조)
 */

:root {
  /* === Color : Mint/Teal 메인 === */
  --c-mint-50:  #e6fbf7;
  --c-mint-100: #b8f3e6;
  --c-mint-200: #7ce8d2;
  --c-mint-300: #3fd9bb;
  --c-mint-400: #1ec9a8;
  --c-mint-500: #0fb8a8;   /* 메인 */
  --c-mint-600: #0a9b8e;
  --c-mint-700: #087e73;
  --c-mint-800: #06605a;
  --c-mint-900: #044540;

  /* === Color : Deep Blue 보조(전문성) === */
  --c-blue-50:  #e8eef7;
  --c-blue-300: #5a78b0;
  --c-blue-500: #1e3a6d;
  --c-blue-700: #122448;
  --c-blue-900: #08152c;

  /* === Color : Coral 액센트(특수청소/긴급 강조) === */
  --c-coral-400: #ff8870;
  --c-coral-500: #ff6a4e;
  --c-coral-600: #e8492a;

  /* === Color : Neutral === */
  --c-ink-900: #0a1620;
  --c-ink-700: #2b3a4a;
  --c-ink-500: #4f6175;
  --c-ink-300: #93a3b5;
  --c-ink-100: #d6dde6;
  --c-bg:      #ffffff;
  --c-bg-soft: #f6faf9;
  --c-bg-mint: #e6fbf7;

  /* === Semantic === */
  --c-text:        var(--c-ink-900);
  --c-text-soft:   var(--c-ink-700);
  --c-text-muted:  var(--c-ink-500);
  --c-brand:       var(--c-mint-500);
  --c-brand-deep:  var(--c-mint-700);
  --c-accent:      var(--c-coral-500);
  --c-border:      var(--c-ink-100);
  --c-line:        rgba(15, 184, 168, 0.18);

  /* === Typography === */
  --f-sans:    "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Noto Sans KR", system-ui, sans-serif;
  --f-impact:  "Black Han Sans", var(--f-sans);
  --f-sub:     "Gmarket Sans", var(--f-sans);
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* fluid scale (clamp) — 한국어 기준 +1pt, 모바일 본문 16px 보장 */
  --t-h1:    clamp(2.1rem, 5.4vw + 0.5rem, 4.4rem);
  --t-h2:    clamp(1.7rem, 2.8vw + 0.6rem, 2.8rem);
  --t-h3:    clamp(1.3rem, 1.4vw + 0.8rem, 1.7rem);
  --t-h4:    clamp(1.15rem, 0.7vw + 0.9rem, 1.35rem);
  --t-lead:  clamp(1.1rem, 0.6vw + 0.9rem, 1.25rem);
  --t-body:  clamp(1rem, 0.4vw + 0.92rem, 1.1rem);    /* 모바일 16~17px, 데스크 17~18px */
  --t-card:  clamp(0.98rem, 0.3vw + 0.88rem, 1.05rem); /* 카드 본문 */
  --t-meta:  clamp(0.86rem, 0.2vw + 0.82rem, 0.95rem);
  --t-small: 0.9rem;

  /* === Spacing & Radius === */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* === Shadow === */
  --sh-sm: 0 2px 8px rgba(8, 21, 44, 0.06);
  --sh-md: 0 10px 30px -8px rgba(8, 21, 44, 0.18);
  --sh-lg: 0 24px 60px -15px rgba(8, 21, 44, 0.22);
  --sh-mint: 0 12px 28px -8px rgba(15, 184, 168, 0.45);
  --sh-coral: 0 12px 28px -8px rgba(255, 106, 78, 0.45);

  /* === Layout === */
  --w-container: 1200px;
  --w-narrow:    860px;
  --header-h: 88px;

  /* === Motion === */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur:      280ms;
  --dur-slow: 520ms;
}

@media (max-width: 768px) {
  :root {
    --header-h: 72px;
    --s-9: 4.5rem;
    --s-10: 6rem;
  }
}