/* ============================================================
   KASA Design System — Design Tokens
   (사)한국동물복지표준협회 · Korean Animal Welfare Standard Association
   ------------------------------------------------------------
   모든 색상·타이포·간격·반경·그림자는 이 파일의 변수로만 사용합니다.
   페이지/컴포넌트에서 하드코딩(예: #fff, 16px)을 피하고 토큰을 참조하세요.
   이 파일은 정적 HTML, Next.js, 어떤 프레임워크에서도 그대로 재사용됩니다.
   ============================================================ */

:root {
  /* --- Brand colors (브랜드 가이드 기준) --------------------- */
  --c-blue:        #005B92;   /* RGB(0,91,146)  Primary */
  --c-blue-700:    #00497a;
  --c-blue-600:    #005B92;
  --c-blue-400:    #3f86b3;
  --c-blue-200:    #a9cae0;
  --c-blue-100:    #d7e7f1;
  --c-blue-50:     #eef5fa;

  --c-green:       #007C53;   /* RGB(0,124,83)  Accent */
  --c-green-700:   #00603f;
  --c-green-400:   #36a079;
  --c-green-100:   #d2ece1;
  --c-green-50:    #eef8f3;

  --c-gray:        #3F3F3F;   /* RGB(63,63,63)  Brand neutral */

  /* Brand gradient (로고 K 스워시: green → blue) */
  --grad-brand:     linear-gradient(90deg, var(--c-green), var(--c-blue));
  --grad-brand-135: linear-gradient(135deg, #007C53 0%, #006a72 45%, #005B92 100%);
  --grad-hero:      linear-gradient(135deg, #02324e 0%, #024a6c 48%, #045a44 100%);

  /* --- Neutrals / text / surfaces --------------------------- */
  --c-bg:          #ffffff;
  --c-white:       #ffffff;
  --c-ink:         #1b1d20;   /* primary text */
  --c-ink-2:       #565a5f;   /* secondary text */
  --c-ink-3:       #8b8f95;   /* muted / hints */
  --c-line:        #e6e9ec;   /* default border */
  --c-line-2:      #d4d8dd;   /* stronger border */
  --c-surface:     #f5f7f8;   /* alt section bg */
  --c-surface-2:   #eaeef1;   /* placeholders / chips */

  /* Dark surfaces (footer / dark bands) */
  --c-dark:        #0d1b26;
  --c-dark-2:      #11212e;
  --c-navy:        #06314c;   /* solid hero / subhead / dark media */
  --c-on-dark:     #e8edf1;
  --c-on-dark-2:   #9fb0bd;

  /* --- Semantic colors (게시판 상태/뱃지) ------------------- */
  --c-success:     #0f7a4d;  --c-success-bg: #e7f4ee;
  --c-warning:     #a86a00;  --c-warning-bg: #fbf0d8;
  --c-info:        #1f6fb0;  --c-info-bg:    #e8f1f9;
  --c-danger:      #b3261e;  --c-danger-bg:  #fae9e8;

  /* --- Typography ------------------------------------------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans KR", Arial, sans-serif;

  /* Fluid type scale (clamp: min / preferred / max) */
  --fs-display: clamp(2.5rem, 1.55rem + 4.2vw, 5rem);
  --fs-h1:      clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.7vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.08rem + 0.85vw, 1.6rem);
  --fs-h4:      clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem);
  --fs-lead:    clamp(1.05rem, 0.99rem + 0.32vw, 1.2rem);
  --fs-body:    1rem;      /* 16px */
  --fs-sm:      0.875rem;  /* 14px */
  --fs-xs:      0.78rem;   /* ~12.5px */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh:         1.65;
  --ls-tight:  -0.02em;
  --ls-kicker:  0.16em;

  /* --- Spacing scale (4px base) ----------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --section-py:    clamp(3.5rem, 2rem + 6vw, 8rem);
  --gap:           clamp(1rem, 0.5rem + 1.4vw, 2rem);
  --container:     1240px;
  --container-narrow: 880px;
  --container-pad: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* --- Radius ----------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-full: 999px;

  /* --- Shadows ---------------------------------------------- */
  --sh-sm:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --sh-md:    0 8px 20px rgba(16,24,40,.08);
  --sh-lg:    0 20px 44px rgba(16,24,40,.13);
  --sh-focus: 0 0 0 3px rgba(0,91,146,.28);

  /* --- Layout / motion -------------------------------------- */
  --header-h:  76px;
  --z-header:  100;
  --z-nav:     200;
  --z-modal:   300;
  --z-top:     250;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur:      .5s;
  --dur-fast: .25s;
}

/* Breakpoints (참고용 — CSS media query에서 동일 값 사용)
   sm: 640px · md: 768px · lg: 980px · xl: 1240px            */

@media (max-width: 768px) {
  :root { --header-h: 64px; }
}