/* =========================================================
   다옴겨 Design Tokens v0.1 (1차 시안)  — 2026-10-30
   Primary: 다옴겨 레드 #D21F1D (logo_daomg.png 픽셀 실측: 불투명 픽셀 100%가 RGB 210,31,29)
   Font: Pretendard Variable (jsDelivr CDN)
   ========================================================= */
/* Use installed system fonts: no network font swap or resulting layout shift. */

:root {
  /* ---------- Brand / Primary (흰 배경 대비) ---------- */
  --red-50:  #FDECEC;  /* 연한 배경 (텍스트 불가 영역용) */
  --red-100: #F9D3D2;  /* 선택 상태 배경, 배지 배경 */
  --red-200: #F2A8A6;  /* 보더/구분선 강조 */
  --red-500: #D21F1D;  /* PRIMARY — 흰 배경 5.31:1 (AA 본문 통과) */
  --red-600: #B01815;  /* HOVER — 7.03:1 (AAA) */
  --red-700: #8F1311;  /* PRESSED / 연한배경 위 텍스트 — 9.25:1 */

  --color-primary:         var(--red-500);
  --color-primary-hover:   var(--red-600);
  --color-primary-pressed: var(--red-700);
  --color-primary-soft:    var(--red-50);
  --color-primary-soft-2:  var(--red-100);
  --color-on-primary:      #FFFFFF;      /* 흰 글자 on #D21F1D 5.31:1 */

  /* ---------- Gray scale (짙은 회색 계열, 남색 기 없음) ---------- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F7F8F9;  /* 섹션 교차 배경 */
  --gray-100: #F0F1F3;  /* 입력 배경, 표 헤더 */
  --gray-200: #E2E4E8;  /* 기본 보더 */
  --gray-300: #C6CAD0;  /* 비활성 보더 (텍스트 불가 1.65:1) */
  --gray-400: #9AA0A6;  /* 아이콘·장식 전용 (2.64:1, 텍스트 불가) */
  --gray-500: #6E737A;  /* 보조 텍스트 최저선 — 4.78:1 AA */
  --gray-600: #55595F;  /* 보조 텍스트 — 7.05:1 */
  --gray-700: #3A3D42;  /* 본문 서브 — 10.9:1 */
  --gray-800: #26282B;  /* 본문 — 14.78:1 */
  --gray-900: #18191B;  /* 제목·다크 섹션 배경 — 17.59:1 */

  --color-text:        var(--gray-800);
  --color-text-strong: var(--gray-900);
  --color-text-sub:    var(--gray-600);
  --color-text-muted:  var(--gray-500);
  --color-border:      var(--gray-200);
  --color-bg:          #FFFFFF;
  --color-bg-alt:      var(--gray-50);
  --color-bg-dark:     var(--gray-900);

  /* ---------- Status (흰 배경 텍스트 대비 모두 AA 이상) ---------- */
  --color-success: #1E7F4F;  --color-success-bg: #E8F5EE;  /* 5.00:1 */
  --color-warning: #55595F;  --color-warning-bg: #F0F1F3;  /* 4.67:1 */
  --color-info:    #0B6E99;  --color-info-bg:    #E6F3F8;  /* 5.67:1 */
  --color-error:   #A4161A;  --color-error-bg:   #FDECEC;  /* 7.75:1 — 브랜드 레드와 구분: 항상 아이콘+문구 동반 */
  --color-placeholder: #55595F; /* '[확인 필요]' 자리표시 전용 (시안 단계에서만) */
  --color-placeholder-bg: #F0F1F3;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-num: var(--font-sans); /* 숫자는 font-variant-numeric: tabular-nums */

  /* Mobile (기본, mobile-first) */
  --fs-display: 34px; --lh-display: 1.25; /* 첫 화면 헤드라인 */
  --fs-h1: 30px;      --lh-h1: 1.3;
  --fs-h2: 24px;      --lh-h2: 1.35;      /* 섹션 제목 */
  --fs-h3: 20px;      --lh-h3: 1.4;       /* 카드 제목 */
  --fs-h4: 17px;      --lh-h4: 1.45;
  --fs-body-lg: 17px; --lh-body-lg: 1.6;
  --fs-body: 16px;    --lh-body: 1.6;
  --fs-sm: 14px;      --lh-sm: 1.5;
  --fs-xs: 12px;      --lh-xs: 1.45;      /* 캡션·법정표기 최소 */
  --fs-eyebrow: 13px;                      /* 섹션 라벨 (letter-spacing .08em) */

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --ls-tight: -0.02em; --ls-normal: -0.01em; --ls-label: 0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px; --sp-30: 120px;
  --section-y: var(--sp-16);   /* 모바일 섹션 상하 64 */
  --gutter: var(--sp-5);       /* 모바일 좌우 20 */
  --container: 1200px;

  /* ---------- Radius (작고 단단하게) ---------- */
  --r-xs: 4px;   /* 배지·태그 */
  --r-sm: 6px;   /* 입력·버튼 */
  --r-md: 10px;  /* 카드 */
  --r-lg: 16px;  /* 큰 패널·견적 바 */
  --r-pill: 999px;

  /* ---------- Shadow (얕게, 3D 느낌 금지) ---------- */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(24,25,27,.06), 0 1px 1px rgba(24,25,27,.04);  /* 카드 기본 */
  --sh-2: 0 4px 12px rgba(24,25,27,.08);                               /* 카드 hover, 드롭다운 */
  --sh-3: 0 12px 32px rgba(24,25,27,.12);                              /* 견적 바, 모달 */
  --sh-bar: 0 -4px 16px rgba(24,25,27,.10);                            /* 모바일 하단 고정 바 */
  --focus-ring: 0 0 0 3px rgba(210,31,29,.35);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms; --dur: 200ms;

  /* ---------- Layout ---------- */
  --header-h: 60px;
  --bottom-bar-h: 64px;
  --z-header: 50; --z-bar: 60;
}

/* PC 스케일 (>=1024px) */
@media (min-width: 1024px) {
  :root {
    --fs-display: 56px; --lh-display: 1.2;
    --fs-h1: 44px;      --lh-h1: 1.25;
    --fs-h2: 36px;      --lh-h2: 1.3;
    --fs-h3: 22px;      --lh-h3: 1.4;
    --fs-h4: 18px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-sm: 14px;
    --fs-xs: 13px;
    --section-y: var(--sp-24);   /* 96 */
    --gutter: var(--sp-10);      /* 40 */
    --header-h: 76px;
  }
}