/* ============================================================
   씽크써클 (Future Problem Solving Korea) — 디자인 토큰
   Claude Design 원본(oklch 색상 체계)을 CSS 커스텀 프로퍼티로 이식.
   색상 값을 바꿀 때는 이 파일만 수정하면 전체 사이트에 반영됩니다.
   ============================================================ */

:root {
  /* ---- 공통 색상 ---- */
  --ink: oklch(20% 0.02 260);
  --ink-soft: oklch(42% 0.02 260);
  --paper: oklch(98.5% 0.004 90);
  --blue: oklch(40% 0.11 255);
  --blue-deep: oklch(26% 0.07 255);
  --coral: oklch(70% 0.15 40);
  --amber: oklch(78% 0.14 75);
  --teal: oklch(58% 0.09 195);
  --hair: oklch(90% 0.006 90);
  --surface-soft: oklch(96% 0.006 90);

  /* ---- 상위 메뉴(섹션) 배너 컬러 — 5개 메뉴 전용, 프로그램 컬러와 별개 ---- */
  --section-about: 0, 95, 155;        /* 소개 — FPS Blue */
  --section-program: 10, 169, 143;    /* 프로그램 — Green */
  --section-ic: 64, 196, 224;         /* 국제 대회 — Cyan */
  --section-join: 242, 108, 87;       /* 참여하기 — Coral */
  --section-community: 151, 108, 164; /* 커뮤니티 — Purple */

  /* ---- 프로그램 아이덴티티 컬러 (프로그램 상세 페이지 전용) ---- */
  --gi: #0AA98F; /* Global Issues */
  --cp: #40C4E0; /* Community Projects */
  --cw: #F26C57; /* Creative Writing */
  --st: #976CA4; /* Storytelling */
  --pp: #005F9B; /* Primary Programs */

  /* ---- 타이포그래피 ---- */
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Permanent Marker', cursive;

  /* ---- spacing / container ---- */
  --container-max: 1200px;
  --container-max-wide: 1440px;
  --pad-mobile: 20px;
  --pad-tablet: 32px;
  --pad-desktop: 48px;
  --container-pad: var(--pad-mobile);

  /* ---- breakpoints (참고용 — 실제 분기는 media query에서 사용) ---- */
  --bp-tablet: 768px;
  --bp-desktop: 1080px;
}

@media (min-width: 768px) {
  :root { --container-pad: var(--pad-tablet); }
}
@media (min-width: 1080px) {
  :root { --container-pad: var(--pad-desktop); }
}