/**
 * ============================================================
 * INOT Design Tokens — v1
 * ============================================================
 * 모든 페이지 템플릿은 이 파일을 기준으로 작성합니다.
 * functions.php에서 wp_enqueue_style로 등록하면 wp_head()를
 * 통해 모든 페이지에 자동 로드됩니다.
 *
 * 사용법:
 *   color: var(--inot-black);
 *   font-size: var(--inot-size-body);
 *   max-width: var(--inot-inner-max);
 *
 * AI 작업 규칙:
 *   - 새 페이지 템플릿 작성 시 반드시 이 파일의 토큰을 사용
 *   - 하드코딩 금지 (#1a1a22 대신 var(--inot-black) 사용)
 *   - 토큰에 없는 값이 필요하면 이 파일에 추가 후 사용
 *   - trial/ 폴더 파일은 절대 수정 금지 (읽기 전용 레퍼런스)
 * ============================================================
 */

:root {

  /* ── 색상 ──────────────────────────────────────────────── */

  /* 기본 */
  --inot-black:        #1a1a22;   /* 본문 텍스트, 버튼 배경, 주요 UI */
  --inot-white:        #ffffff;
  --inot-footer-bg:    #0d0d14;   /* 푸터 배경 */

  /* 배경 */
  --inot-bg-page:      #ffffff;   /* 내부 페이지 기본 배경 */
  --inot-bg-home:      #f5f5f0;   /* 홈페이지 body 배경 */
  --inot-bg-section:   #f7f7f6;   /* 브랜드 섹션 등 연한 배경 */
  --inot-bg-cta:       #f5f5f2;   /* CTA 섹션 배경 */
  --inot-bg-mega-left: #f7f7f7;   /* 메가메뉴 왼쪽 패널 */
  --inot-bg-input:     #fafafa;   /* 입력 필드, 키워드 칩 배경 */

  /* 텍스트 */
  --inot-text-primary:   #1a1a22; /* 제목, 강조 텍스트 */
  --inot-text-secondary: #555555; /* 본문 보조 텍스트 */
  --inot-text-muted:     #666666; /* 연한 보조 텍스트 */
  --inot-text-placeholder: #999999; /* placeholder, label */
  --inot-text-meta:      #bbbbbb; /* 날짜, 카운터 등 메타 정보 */
  --inot-text-category:  #8a8a8a; /* 카테고리 레이블 */

  /* 선/테두리 */
  --inot-border:       #e2e2e2;   /* 기본 테두리 */
  --inot-border-dark:  #d8d8d8;   /* 인풋 테두리 */
  --inot-border-light: #eeeeee;   /* 구분선, 리스트 경계 */

  /* 헤더 (반투명) */
  --inot-header-bg:         rgba(10, 10, 18, 0.95);
  --inot-header-bg-scrolled: rgba(10, 10, 18, 0.96);

  /* 액센트 */
  --inot-accent:       #3a6fbc;   /* 히어로 프로그레스 바 */

  /* 오버레이 */
  --inot-overlay-hero:   rgba(0, 0, 0, 0.30);  /* 히어로 이미지 오버레이 */
  --inot-overlay-story:  rgba(9, 12, 18, 0.64); /* 스토리 비주얼 오버레이 */
  --inot-overlay-drawer: rgba(0, 0, 0, 0.40);   /* 모바일 드로어 딤 */


  /* ── 타이포그래피 ─────────────────────────────────────── */

  /* 폰트 패밀리 */
  --inot-font: 'DM Sans', 'Noto Sans KR', sans-serif;

  /* 폰트 웨이트 */
  --inot-fw-light:    300;
  --inot-fw-regular:  400;
  --inot-fw-medium:   500;
  --inot-fw-semibold: 600;
  --inot-fw-bold:     700;

  /* 폰트 사이즈 */
  --inot-size-hero:    clamp(32px, 6vw, 72px);    /* 히어로 메인 타이틀 */
  --inot-size-display: clamp(32px, 4vw, 44px);    /* 페이지 타이틀 (제품 목록 등) */
  --inot-size-section: 32px;                       /* 섹션 타이틀 (뉴스, 스토리) */
  --inot-size-h2:      24px;                       /* 서브 헤딩 */
  --inot-size-body-lg: 18px;                       /* 히어로 부제목, 검색 인풋 */
  --inot-size-body:    16px;                       /* 기본 본문 */
  --inot-size-body-sm: 14px;                       /* 카드 설명, 네비 서브메뉴 */
  --inot-size-caption: 12px;                       /* 네비, 태그, 버튼, 카테고리 */
  --inot-size-micro:   11px;                       /* 날짜, 카운터, 아이브로우 */

  /* 줄 간격 */
  --inot-lh-tight:   1.1;
  --inot-lh-heading: 1.35;
  --inot-lh-body:    1.7;
  --inot-lh-loose:   1.9;

  /* 자간 */
  --inot-ls-tight:   -0.04em;
  --inot-ls-normal:  -0.02em;
  --inot-ls-wide:    0.06em;
  --inot-ls-wider:   0.08em;
  --inot-ls-widest:  0.18em;  /* 로고 */


  /* ── 레이아웃 / 간격 ──────────────────────────────────── */

  /* 최대 너비 */
  --inot-inner-max:       1280px;  /* 뉴스/스토리 섹션 */
  --inot-inner-products:  1220px;  /* 제품 목록 페이지 */
  --inot-inner-mega:      1400px;  /* 메가메뉴 */

  /* 섹션 수직 패딩 */
  --inot-section-v:       100px;
  --inot-section-v-sm:    56px;    /* 모바일 */

  /* 페이지 수평 패딩 */
  --inot-page-pad:        80px;    /* 데스크탑 */
  --inot-page-pad-md:     40px;    /* 중간 */
  --inot-page-pad-sm:     22px;    /* 모바일 */

  /* 헤더 높이 */
  --inot-header-h:         110px;
  --inot-header-h-scrolled: 64px;
  --inot-header-h-mobile:   60px;

  /* 카드 간격 */
  --inot-gap-card:   28px;
  --inot-gap-grid:   28px;


  /* ── 테두리 반경 ──────────────────────────────────────── */

  --inot-radius-pill:  999px;  /* 버튼, 탭, 칩, 페이지네이션 */
  --inot-radius-card:  4px;    /* 카드 이미지 박스 */
  --inot-radius-btn:   24px;   /* 일부 CTA 버튼 */
  --inot-radius-hero:  40px;   /* 히어로 CTA 버튼 */


  /* ── 트랜지션 / 애니메이션 ────────────────────────────── */

  --inot-ease:          cubic-bezier(0.4, 0, 0.2, 1);   /* 기본 ease */
  --inot-ease-out:      cubic-bezier(0.23, 1, 0.32, 1); /* 캐러셀 슬라이드 */
  --inot-duration-fast: 0.25s;
  --inot-duration-base: 0.3s;
  --inot-duration-slow: 0.5s;
  --inot-duration-hero: 0.8s;


  /* ── z-index 레이어 ───────────────────────────────────── */

  --inot-z-base:    1;
  --inot-z-overlay: 10;
  --inot-z-header:  1001;
  --inot-z-drawer-overlay: 1199;
  --inot-z-drawer:  1200;

}


/* ── 모바일 토큰 재정의 ──────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --inot-header-h:         60px;
    --inot-header-h-scrolled: 60px;
    --inot-section-v:        56px;
    --inot-page-pad:         22px;
    --inot-size-section:     25px;
    --inot-size-h2:          21px;
  }
}