/* AM 데코 — 디자인 토큰
 * 톤: 딥블루(신뢰/전문성) + 주황(현장/임팩트) + 화이트
 * 컨셉: 방수기능사의 집 · 종합 집수리
 * 폰트: Pretendard 900(헤딩) + Black Han Sans(임팩트) + Gmarket Sans(보조)
 */

:root {
  /* === Color : Deep Blue 메인 === */
  --c-blue-50:  #eef2f8;
  --c-blue-100: #d6e0ee;
  --c-blue-200: #aabfde;
  --c-blue-300: #6f8ec3;
  --c-blue-400: #3c5b96;
  --c-blue-500: #1e3a6d;   /* 메인 */
  --c-blue-600: #173058;
  --c-blue-700: #122448;
  --c-blue-800: #0c1a36;
  --c-blue-900: #08152c;

  /* === Color : Orange 액센트(현장/임팩트) === */
  --c-orange-50:  #fff3e8;
  --c-orange-100: #ffe1c2;
  --c-orange-300: #ffaf5e;
  --c-orange-400: #ff9333;
  --c-orange-500: #ff7a14;   /* 액센트 */
  --c-orange-600: #e8650a;
  --c-orange-700: #b94f06;

  /* === Color : Lemon (강조 highlight) === */
  --c-lemon-300: #ffe066;
  --c-lemon-500: #ffd024;

  /* === Mono palette (chan-s 톤 메인) === */
  --c-mono-900: #1a1a1a;
  --c-mono-800: #2a2a2a;
  --c-mono-700: #3a3a3a;
  --c-mono-600: #4a4a4a;
  --c-mono-500: #6a6a6a;
  --c-mono-400: #7a7a7a;
  --c-mono-300: #9a9a9a;
  --c-mono-200: #cfcfcf;
  --c-mono-100: #ececec;
  --c-mono-50:  #fafafa;
  --c-mono-bg:  #f5f5f5;

  /* === Color : Neutral === */
  --c-ink-900: #0a1422;
  --c-ink-700: #25334a;
  --c-ink-500: #4a5b75;
  --c-ink-300: #93a3b8;
  --c-ink-100: #d8dfe9;
  --c-bg:      #ffffff;
  --c-bg-soft: #f6f8fb;
  --c-bg-mint: #eef2f8;

  /* === Semantic (호환 키 유지 — base/layout/page.css가 참조함) === */
  --c-text:        var(--c-ink-900);
  --c-text-soft:   var(--c-ink-700);
  --c-text-muted:  var(--c-ink-500);
  --c-brand:       var(--c-blue-500);
  --c-brand-deep:  var(--c-blue-700);
  --c-accent:      var(--c-orange-500);
  --c-border:      var(--c-ink-100);
  --c-line:        rgba(30, 58, 109, 0.18);

  /* 비치움 호환 alias — base/layout/page.css의 --c-mint-* / --c-coral-* 참조용 */
  --c-mint-50:  var(--c-blue-50);
  --c-mint-100: var(--c-blue-100);
  --c-mint-200: var(--c-blue-200);
  --c-mint-300: var(--c-blue-300);
  --c-mint-400: var(--c-blue-400);
  --c-mint-500: var(--c-blue-500);
  --c-mint-600: var(--c-blue-600);
  --c-mint-700: var(--c-blue-700);
  --c-mint-800: var(--c-blue-800);
  --c-mint-900: var(--c-blue-900);
  --c-coral-400: var(--c-orange-400);
  --c-coral-500: var(--c-orange-500);
  --c-coral-600: var(--c-orange-600);

  /* === 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);
  --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(30, 58, 109, 0.45);
  --sh-coral: 0 12px 28px -8px rgba(255, 122, 20, 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;
  }
}