/* Design Tokens - 아이디얼마케팅 (Toss/당근 inspired) */
:root{
  /* Brand */
  --brand-50:#EBF3FF;
  --brand-100:#D6E7FF;
  --brand-200:#A8CCFF;
  --brand-300:#79B0FF;
  --brand-400:#4A95FF;
  --brand-500:#1F7AFC;   /* primary action */
  --brand-600:#0066CC;   /* legacy brand */
  --brand-700:#0052A3;
  --brand-800:#003D7A;

  /* Accent */
  --accent-orange:#FF7A1A;
  --accent-mint:#1FC8A0;
  --accent-pink:#FF6B9D;
  --accent-yellow:#FFC83D;

  /* Neutral (Toss-like) */
  --gray-0:#FFFFFF;
  --gray-50:#FAFBFC;
  --gray-100:#F2F4F6;
  --gray-200:#E5E8EB;
  --gray-300:#D1D6DB;
  --gray-400:#B0B8C1;
  --gray-500:#8B95A1;
  --gray-600:#6B7684;
  --gray-700:#4E5968;
  --gray-800:#333D4B;
  --gray-900:#191F28;

  /* Semantic */
  --bg:var(--gray-50);
  --surface:var(--gray-0);
  --text:var(--gray-900);
  --text-sub:var(--gray-700);
  --text-mute:var(--gray-500);
  --border:var(--gray-200);
  --border-strong:var(--gray-300);
  --success:#22C55E;
  --danger:#EF4444;

  /* Radius */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:20px;
  --r-2xl:28px;
  --r-pill:999px;

  /* Shadow */
  --sh-xs:0 1px 2px rgba(17,24,39,.04);
  --sh-sm:0 2px 8px rgba(17,24,39,.05);
  --sh-md:0 6px 24px rgba(17,24,39,.06);
  --sh-lg:0 12px 40px rgba(17,24,39,.08);
  --sh-xl:0 24px 60px rgba(17,24,39,.10);
  --sh-brand:0 10px 30px rgba(31,122,252,.25);

  /* Spacing scale (4px base) */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px; --s-6:24px;  --s-7:32px;  --s-8:40px;
  --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;

  /* Type */
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,'Helvetica Neue','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --fs-xs:12px;  --fs-sm:13px; --fs-base:15px; --fs-md:16px;
  --fs-lg:18px;  --fs-xl:20px; --fs-2xl:24px;  --fs-3xl:30px;
  --fs-4xl:36px; --fs-5xl:44px;--fs-hero:56px;
  --lh-tight:1.25;
  --lh-snug:1.4;
  --lh-normal:1.55;
  --lh-relaxed:1.7;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:800;

  /* Layout */
  --container-max:1200px;
  --container-pad:24px;
  --header-h:72px;
  --transition:200ms cubic-bezier(.2,.8,.2,1);
}

@media(max-width:768px){
  :root{
    --container-pad:16px;
    --header-h:60px;
    --fs-hero:32px;
    --fs-5xl:32px;
    --fs-4xl:26px;
    --fs-3xl:22px;
    --fs-2xl:19px;
  }
}