/*
 * 디자인 토큰 (색상·글꼴·간격·모서리·그림자) — '썸의 온도' 시안 기준
 * 디자인을 바꿀 때는 우선 이 파일의 변수 값만 바꿔 보세요.
 * main.css 는 이 변수들로 화면을 구성하고, 결과 카드 이미지(캔버스)도 --card-* 변수를 읽습니다.
 */
:root {
  color-scheme: light;

  /* 배경·면 */
  --color-bg: #fff8f1; /* 살구빛 크림 */
  --color-bg-blush: #fde9da; /* 캐릭터 무대·장식 배경 */
  --color-surface: #ffffff;
  --color-surface-muted: #fff4ea;
  --color-border: #f2e1d2;
  --color-border-strong: #e9cfb8;

  /* 글자 */
  --color-text: #3b2e27;
  --color-text-muted: #7a6a5e;

  /* 강조색 (코랄 핑크)
   * --color-primary: 흰 글자를 올리는 버튼 배경 (흰 글자와 명도 대비 4.5:1 이상)
   * --color-accent: 진행 막대·테두리·아이콘 같은 장식
   * --color-highlight: 큰 제목 안의 강조 글자 */
  --color-primary: #c0531c;
  --color-primary-hover: #a6461a;
  --color-primary-strong: #a3461a;
  --color-on-primary: #ffffff;
  --color-primary-soft: #fde4d2;
  --color-primary-tint: #fff2e8;
  --color-accent: #f08a4b;
  --color-accent-soft: #f7cfb2;
  --color-highlight: #e0682e;
  --color-link: #a3461a;
  --color-focus: #2f6fdc;

  /* 선택지 아이콘 원 (A·B·C·D) */
  --option-1: #fde2d0;
  --option-2: #ffeccf;
  --option-3: #e3efe4;
  --option-4: #e7e3fb;

  --color-notice-bg: #fff6e6;
  --color-notice-border: #f4dcae;
  --color-ad-bg: #f7f0ea;
  --color-ad-label: #7a6a5e;

  /* 글꼴 (src/assets/fonts — 사이트에 포함된 OFL 웹폰트, 외부 요청 없음) */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo',
    'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-display: 'Jua', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  --font-size-3xl: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
  --font-size-hero: clamp(2rem, 1.4rem + 3.2vw, 3.25rem);
  --line-height: 1.7;
  --line-height-tight: 1.3;

  /* 간격 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* 레이아웃 */
  --width-content: 60rem; /* 소개·정책·문의·읽을거리 본문 폭: 메인(--width-wide - 좌우 여백)과 같게 맞춤 */
  --width-wide: 64rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* 모양 */
  --radius-sm: 0.75rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(176, 110, 70, 0.08);
  --shadow-md: 0 10px 30px rgba(176, 110, 70, 0.12);
  --shadow-button: 0 8px 18px rgba(192, 83, 28, 0.25);
  --focus-ring: 3px solid var(--color-focus);
  --tap-size: 2.75rem;

  /* 결과 카드 이미지(다운로드용) */
  --card-font: var(--font-sans);
  --card-title-font: var(--font-display);
  --card-bg: #fff8f1;
  --card-surface: #ffffff;
  --card-text: #3b2e27;
  --card-muted: #7a6a5e;
  --card-border: #f2e1d2;
}