/* 오토핏 시안 A '카탈로그' — tokens.css
   디자인 시스템: IBM Carbon 분석본(awesome-design-md/ibm, MIT) — 0~4px 모서리, 그림자 없는 얇은 테두리 타일, 회색 줄로 구역 구분, 단일 강조색, 제목 300 굵기
   색상: Radix Colors (MIT) gray/grayDark, orange/orangeDark, green, red, amber — 단계 번호는 주석
   유동 글자·간격: Utopia utopia-core calculateClamp (ISC), 360~1240px, 양끝 = Carbon 모바일/데스크톱 값
   이징: Open Props (MIT) --ease-3 / --ease-out-3
   글꼴: 제목 IBM Plex Sans KR (Google Fonts, OFL 1.1 — 상업 사용·웹 임베딩 허용), 본문 Pretendard (OFL 1.1) */
:root{
  --font-head:"IBM Plex Sans KR","Pretendard",system-ui,sans-serif;
  --font-body:"Pretendard",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* 글자: Carbon display-md 42 / headline 32 / card-title 24 / subhead 20 / body 16~18 / body-sm 14~15 / caption 12 */
  --fs-display:clamp(1.75rem, 1.392rem + 1.5909vw, 2.625rem);
  --fs-h1:clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
  --fs-h2:clamp(1.25rem, 1.1477rem + 0.4545vw, 1.5rem);
  --fs-h3:clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --fs-body:clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  --fs-sm:clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --fs-xs:.8125rem;
  /* 간격: Carbon spacing 4/8/12/16/24/32/48/96, 큰 값만 유동 */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:clamp(2rem, 1.5909rem + 1.8182vw, 3rem);
  --sp-section:clamp(2.5rem, 1.4773rem + 4.5455vw, 5rem);
  /* 모양: Carbon rounded none 0 / xs 2 / sm 4 */
  --r-0:0;--r-1:2px;--r-2:4px;
  --ease:cubic-bezier(.25,0,.3,1);--ease-out:cubic-bezier(0,0,.3,1);
  --wrap:1312px;

  /* 라이트 */
  --bg:#ffffff;            /* Carbon canvas */
  --surface:#ffffff;
  --surface-2:#f0f0f0;     /* gray3 — Carbon surface-1 역할 */
  --surface-3:#e8e8e8;     /* gray4 */
  --border:#d9d9d9;        /* gray6 */
  --border-strong:#202020; /* gray12 */
  --text:#202020;          /* gray12 */
  --text-2:#646464;        /* gray11 */
  --primary:#f76b15;       /* orange9 */
  --primary-hover:#ef5f00; /* orange10 */
  --on-primary:#202020;    /* gray12 · 대비 5.48 */
  --link:#cc4e00;          /* orange11 · 흰 바탕 4.51 */
  --accent-soft:#ffefd6;   /* orange3 */
  --inverse:#111111;       /* grayDark1 — Carbon inverse-canvas */
  --inverse-2:#222222;     /* grayDark3 */
  --on-inverse:#eeeeee;    /* grayDark12 */
  --on-inverse-2:#b4b4b4;  /* grayDark11 */
  --ok:#218358;--ok-soft:#e6f6eb;     /* green11 / green3 */
  --bad:#ce2c31;--bad-soft:#feebec;   /* red11 / red3 */
  --warn:#ab6400;--warn-soft:#fff7c2; /* amber11 / amber3 */
  --focus:#cc4e00;
}
:root[data-theme="dark"]{
  --bg:#111111;--surface:#191919;--surface-2:#222222;--surface-3:#2a2a2a; /* grayDark1·2·3·4 */
  --border:#3a3a3a;--border-strong:#eeeeee;                                /* grayDark6 / 12 */
  --text:#eeeeee;--text-2:#b4b4b4;                                          /* grayDark12 / 11 */
  --primary:#f76b15;--primary-hover:#ff801f;--on-primary:#111111;           /* orangeDark9·10 */
  --link:#ffa057;--accent-soft:#331e0b;                                     /* orangeDark11 / 3 */
  --inverse:#000000;--inverse-2:#191919;--on-inverse:#eeeeee;--on-inverse-2:#b4b4b4;
  --ok:#3dd68c;--ok-soft:#132d21;--bad:#ff9592;--bad-soft:#3b1219;--warn:#ffca16;--warn-soft:#302008;
  --focus:#ffa057;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111111;--surface:#191919;--surface-2:#222222;--surface-3:#2a2a2a;
    --border:#3a3a3a;--border-strong:#eeeeee;
    --text:#eeeeee;--text-2:#b4b4b4;
    --primary:#f76b15;--primary-hover:#ff801f;--on-primary:#111111;
    --link:#ffa057;--accent-soft:#331e0b;
    --inverse:#000000;--inverse-2:#191919;--on-inverse:#eeeeee;--on-inverse-2:#b4b4b4;
    --ok:#3dd68c;--ok-soft:#132d21;--bad:#ff9592;--bad-soft:#3b1219;--warn:#ffca16;--warn-soft:#302008;
    --focus:#ffa057;
  }
}