/* 디자인 토큰 — docs/superpowers/specs/2026-08-22-design-system-and-ui-refresh-design.md §3 */
@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/pretendard-var.subset.woff2") format("woff2-variations"),
       url("fonts/pretendard-var.subset.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jalnan Gothic";
  src: url("fonts/jalnan.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 색상 — AskMath 스크린샷 */
  --c-brand: #7DCBB5;
  --c-brand-deep: #4FAE97;
  --c-brand-tint: #D6ECE7;
  --c-band-bg: #EAF6F2;
  --c-accent: #D9584F;
  --c-accent-deep: #C04941;
  --c-sky: #E9F2FA;
  --c-butter: #F6EFD9;
  --c-periwinkle: #B8BAE6;
  --c-ink: #1B1F2A;
  --c-ink-2: #4A4F5C;
  --c-ink-3: #8A8F9C;
  --c-line: #E6E8EE;
  --c-row: #F3F3F4;
  --c-surface: #FFFFFF;
  --c-bg: #FFFFFF;
  --c-logo-ink: #3B3F7A;
  /* 색상 — PDF 분석지 */
  --c-sheet-bg: #C9D3ED;
  --c-sheet-grid: rgba(255, 255, 255, .45);
  --c-sheet-navy: #4A66B4;
  --c-sheet-navy-deep: #3B55A0;
  --c-sheet-line: #9DB0E0;
  --c-danger: #C0392B;
  --c-success: #2F9E75;
  --c-focus-ring: rgba(125, 203, 181, .35);
  --c-sheet-ring: rgba(74, 102, 180, .35);
  --c-white: #FFFFFF;
  --c-overlay-ink: rgba(27, 31, 42, .08);
  --c-overlay-dim: rgba(27, 31, 42, .55);
  --c-overlay-white: rgba(255, 255, 255, .7);
  --c-glyph: rgba(255, 255, 255, .28);
  --c-hero-shadow: rgba(59, 85, 160, .35);
  --c-sheet-th: #F4F6FD;
  --c-print-line: #CCCCCC;
  --c-alert-bg: #FDECEA;
  --c-alert-line: #F5C6C1;
  --c-warn-bg: #FFF3CD;
  --c-warn-ink: #7A5200;
  --c-clip: #8D93A5;

  /* 서체 */
  --f-display: "Jalnan Gothic", "Pretendard Variable", Pretendard, sans-serif;
  --f-body: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --t-hero: 48px;
  --t-h1: 32px;
  --t-h2: 24px;
  --t-h3: 20px;
  --t-nav: 18px;
  --t-body: 16px;
  --t-body-m: 16px;
  --t-small: 14px;
  --t-caption: 13px;

  /* 간격·형태·그림자 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --sh-sm: 0 1px 3px rgba(27, 31, 42, .06);
  --sh-md: 0 6px 20px rgba(27, 31, 42, .08);
  --w-shell: 1200px;
  --w-content: 960px;
  --w-sheet: 760px;

  /* 모션 */
  --dur-fast: 150ms;
  --dur: 250ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 640px) {
  :root { --t-hero: 34px; --t-h1: 26px; --t-h2: 22px; }
}