/* =====================================================================
   K-Arts PRIDE 2026 — Design Tokens
   ---------------------------------------------------------------------
   사이트 전체의 색 · 서체 · 글자 크기 · 간격은 이 파일 하나에서 바뀝니다.
   Figma 라이브러리(KP26 / Library 변수, KP26/* 텍스트 스타일)와 1:1로 대응합니다.

   팔레트 바꾸기: 각 HTML의 <html data-palette="key"> 값을 바꾸세요.
     key | cover-brown | orange-2024 | mint-2023
   ===================================================================== */

/* ---------- 1. 서체 ------------------------------------------------- */
/* assets/fonts/의 로컬 웹폰트를 사용합니다. 굵기는 파일 내부 값 기준입니다.
   로딩에 실패하면 Jost로 대체됩니다. */
@font-face {
  font-family: "Studio Feixen Sans";
  src: url("../assets/fonts/StudioFeixenSans-Ultralight.woff2") format("woff2"),
       url("../assets/fonts/StudioFeixenSans-Ultralight.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Studio Feixen Sans";
  src: url("../assets/fonts/StudioFeixenSans-Light.woff2") format("woff2"),
       url("../assets/fonts/StudioFeixenSans-Light.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Studio Feixen Sans";
  src: url("../assets/fonts/StudioFeixenSans-Book.woff2") format("woff2"),
       url("../assets/fonts/StudioFeixenSans-Book.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Studio Feixen Sans";
  src: url("../assets/fonts/StudioFeixenSans-Regular.woff2") format("woff2"),
       url("../assets/fonts/StudioFeixenSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Studio Feixen Sans";
  src: url("../assets/fonts/StudioFeixenSans-Medium.woff2") format("woff2"),
       url("../assets/fonts/StudioFeixenSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Studio Feixen Sans";
  src: url("../assets/fonts/StudioFeixenSans-Semibold.woff2") format("woff2"),
       url("../assets/fonts/StudioFeixenSans-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Studio Feixen Sans";
  src: url("../assets/fonts/StudioFeixenSans-Bold.woff2") format("woff2"),
       url("../assets/fonts/StudioFeixenSans-Bold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Studio Feixen Sans", "Jost", "Pretendard Variable", Pretendard, sans-serif;
  --font-kr: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* ---------- 2. 색 (기본: 2026 Key #8796FF) ------------------------ */
  --c-paper:        #FDFDFE;  /* 페이지 바탕 */
  --c-ink:          #12141C;  /* 본문 글자 */
  --c-muted:        #636574;  /* 보조 글자 */
  --c-line:         #8796FF;  /* 그리드 선 */
  --c-accent:       #8796FF;  /* 키 컬러 */
  --c-accent-soft:  #CCD2FF;  /* 차트 두 번째 칸 · 구분선 */
  --c-accent-deep:  #3E54EA;  /* 차트 강조 칸 */
  --c-accent-text:  #3C50DD;  /* 수치 · 강조 글자 */
  --c-on-accent:    #12141C;  /* 키 컬러 위 글자 */
  --c-hero:         #8796FF;  /* 랜딩 · 섹션 띠 바탕 */
  --c-on-hero:      #12141C;  /* 띠 위 글자 */
  --c-hero-title:   #FFFFFF;  /* 랜딩 대제목 (Figma에서 흰색으로 지정) */
  --c-sheet:        #D7D8E0;  /* 모티브 시트 */
  --c-sheet-line:   #6E7FF7;  /* 모티브 격자선 */
  --c-ground:       #D7D8E0;  /* 차트 바탕 */
  --c-cell:         #FFFFFF;  /* 빈 칸 */
  --c-tooltip:      #12141C;
  --c-on-tooltip:   #FDFDFE;

  /* ---------- 3. 글자 (Figma KP26/* 텍스트 스타일) ----------------- */
  --fs-display-xl: 132px;  --lh-display-xl: 0.92; --ls-display-xl: -0.01em;
  --fs-display-l:   72px;  --lh-display-l:  0.90; --ls-display-l:  -0.005em;
  --fs-section:     40px;  --lh-section:    1.10;
  --fs-stat-l:      56px;  --lh-stat:       1.00; --ls-stat-l:     -0.005em;
  --fs-stat-m:      36px;
  --fs-nav:         16px;
  --fs-label-en:    12px;  --ls-label-en:   0.04em;
  --fs-heading:     28px;  --lh-heading:    1.40; --ls-heading:    -0.01em;
  --fs-title:       16px;  --lh-title:      1.50; --ls-title:      -0.005em;
  --fs-body:        14px;  --lh-body:       1.70; --ls-body:       -0.005em;
  --fs-caption:     11px;  --lh-caption:    1.50;
  --fs-unit:        14px;

  /* ---------- 4. 그리드 · 간격 ------------------------------------- */
  --grid-cols: 4;          /* 1440 기준 360px 4단 */
  --gutter: 24px;          /* 칸 안쪽 여백 */
  --header-h: 48px;
  --line: 1px;
  --joint: 6px;            /* 선 교차점의 사각 표시 */
  --cell: 12px;            /* 모티브 기본 격자 */
  --divider-h: 240px;      /* 섹션 띠 높이 */
  --hero-h: clamp(480px, 50vw, 720px);
}

/* ---------- 팔레트 모드 (Figma 변수 모드와 동일) ---------------------- */
[data-palette="cover-brown"] {
  --c-paper: #F7F6F5; --c-ink: #221E1D; --c-muted: #6F6664; --c-line: #483E3C;
  --c-accent: #8796FF; --c-accent-soft: #CCD2FF; --c-accent-deep: #3E54EA; --c-accent-text: #3C50DD;
  --c-on-accent: #12141C; --c-hero: #483E3C; --c-on-hero: #FFFFFF; --c-hero-title: #FFFFFF;
  --c-sheet: #8796FF; --c-sheet-line: #FFFFFF; --c-ground: #D9D6D5; --c-cell: #FFFFFF;
}
[data-palette="orange-2024"] {
  --c-paper: #FDFDFD; --c-ink: #111111; --c-muted: #666666; --c-line: #111111;
  --c-accent: #F08A24; --c-accent-soft: #F9D0A6; --c-accent-deep: #B85A0A; --c-accent-text: #C0620E;
  --c-on-accent: #111111; --c-hero: #F08A24; --c-on-hero: #111111; --c-hero-title: #111111;
  --c-sheet: #FDFDFD; --c-sheet-line: #F08A24; --c-ground: #E2E2E2; --c-cell: #FFFFFF;
}
[data-palette="mint-2023"] {
  --c-paper: #FFFFFF; --c-ink: #111111; --c-muted: #555555; --c-line: #2AC69C;
  --c-accent: #2AC69C; --c-accent-soft: #BFEFE0; --c-accent-deep: #13866A; --c-accent-text: #13866A;
  --c-on-accent: #111111; --c-hero: #2AC69C; --c-on-hero: #111111; --c-hero-title: #111111;
  --c-sheet: #DFF6EF; --c-sheet-line: #2AC69C; --c-ground: #E4E4E4; --c-cell: #FFFFFF;
}

/* ---------- 반응형: 태블릿 · 모바일 (Figma 375 프레임 기준) ---------- */
@media (max-width: 1024px) {
  :root {
    --grid-cols: 2;
    --fs-display-xl: 104px;
    --fs-display-l: 56px;
  }
}
@media (max-width: 640px) {
  :root {
    --grid-cols: 1;
    --gutter: 16px;
    --fs-display-l: 48px;
    --fs-display-xl: 72px;
    --fs-section: 32px;
    --fs-heading: 24px;
    --divider-h: 144px;
    --hero-h: 480px;
  }
}