/*
 * THEME: firecrawl  (SPEC §3.2)
 * 출신: _inbox/firecrawl/tokens.css
 *
 * 톤: light · "whiteboard blueprints, with a single neon 'active' indicator"
 *     캔버스가 순수 white 가 아니라 옅은 회색(#e5e7eb cloud-canvas) — 종이 위의 청사진 느낌.
 *     카드는 paper-white(#f9f9f9), 최상단 elevated 요소만 순수 #ffffff.  세 단의 표면 위계.
 *     채도 있는 색은 Fire Orange #ff4d00 단 한 곳뿐 — 페이지에서 클릭하길 바라는 그 자리에만.
 *
 * 매핑표 (키트 변수 → 계약 변수):
 *   --accent (#ff4d00 fire-orange)             → --c-action
 *   (fire-orange 살짝 어둡게)                   → --c-action-hover  (도출, 키트 미정의)
 *   --fg-on-accent (#ffffff)                   → --c-on-action
 *   --info (#006fff code-blue)                 → --c-accent       (코드 신택스 전용 → 보조 강조 슬롯)
 *   --fg / --color-ink-black (#262626)         → --c-ink
 *   --fg-muted / --color-stone-gray (#616161)  → --c-body
 *   --fg-subtle / --color-slate-gray (#727272) → --c-muted
 *   --fg-on-accent (#ffffff)                   → --c-on-dark
 *   (silver-mist 살짝 흐리게)                   → --c-on-dark-muted (도출, 다크 위 본문)
 *   --link / --color-stone-gray (#616161)      → --c-link          (키트 링크는 subdued, ink on hover)
 *   --bg / --color-cloud-canvas (#e5e7eb)      → --c-canvas
 *   --bg-card / --color-paper-white (#f9f9f9)  → --c-surface       (카드 표면)
 *   --bg-elevated (#ffffff)                    → --c-surface-soft  (입력카드/버튼 안쪽 흰 면)
 *   --color-ink-black (#262626)                → --c-surface-dark  (다크 surface 없음 — ink 로 폴백)
 *   (ink 살짝 elev)                             → --c-surface-dark-elev (도출, dark 위 떠 있는 카드)
 *   --border / --color-cloud-canvas (#e5e7eb)  → --c-hairline      (경계 = 캔버스 색, "주름처럼" 보이게)
 *   --color-frost-gray (#c7c7c7)               → --c-border-strong
 *   #16a34a (부품 okDot — status 표시)          → --c-success
 *   (키트 미정의)                                → --c-danger       (의미색 보조, 도출)
 *
 * 누락:
 *   --c-surface-dark / --c-surface-dark-elev — 키트는 light-only.  Footer/CTA 가 다크 띠를
 *      쓰지 않는 라이트 전용 키트라 ink(#262626) 로 폴백 + 살짝 elev 도출.  다크 부품을
 *      얹으면 어색할 수 있으므로 firecrawl 톤은 라이트 부품만 권장.
 *   --c-on-dark-muted — 키트 미정의.  silver-mist(#949494) 가 라이트 placeholder 인데
 *      다크 위에선 대비가 부족 → 표준 #b3b3b3 으로.
 *
 * 브랜드 장식 색 (계약 안 함, 부품에 인라인으로 유지 — §3.1 / §5):
 *   --color-pale-sienna (#fcddcc) — Hero 의 radial glow.
 *   --color-powder-pink (#febec2) — 보조 warm 강조 (현재 부품 미사용).
 *   --color-code-blue   (#006fff) — 코드 신택스 keyword/string (--c-accent 로 받음).
 *
 * Display 가 키트 토큰엔 60px (display-lg) — 그대로 채택.  히어로 헤드라인이 80 자
 * 이상이라 더 키우면 줄바꿈이 잦아져 reading rhythm 깨짐.  firecrawl 톤은 confidence
 * over volume — 한 단 작게 시작해 가독성으로 승부.
 */

:root {
  /* ===== 색: 액션 ===== */
  --c-action:            #ff4d00;            /* fire-orange — 키트 시그니처 액션색 */
  --c-action-hover:      #e64500;            /* 도출: orange 살짝 어둡게 */
  --c-on-action:         #ffffff;
  --c-accent:            #006fff;            /* code-blue — 코드 신택스 / info 액센트 */

  /* ===== 색: 텍스트 ===== */
  --c-ink:               #262626;            /* ink-black */
  --c-body:              #616161;            /* stone-gray */
  --c-muted:             #727272;            /* slate-gray */
  --c-on-dark:           #ffffff;
  --c-on-dark-muted:     #b3b3b3;            /* 도출 (키트 미정의) */
  --c-link:              #616161;            /* 키트 --link — subdued, ink on hover */

  /* ===== 색: 배경/표면 ===== */
  --c-canvas:            #e5e7eb;            /* cloud-canvas — 종이 위 청사진 톤 */
  --c-surface:           #f9f9f9;            /* paper-white — 카드 표면 */
  --c-surface-soft:      #ffffff;            /* elevated — 입력카드/버튼 안쪽 흰 면 */
  --c-surface-dark:      #262626;            /* 키트는 light-only → ink 로 폴백 */
  --c-surface-dark-elev: #3a3a3a;            /* 도출: dark 위 떠 있는 카드 */

  /* ===== 색: 경계 ===== */
  --c-hairline:          #e5e7eb;            /* 키트 --border = canvas 색 (주름처럼) */
  --c-border-strong:     #c7c7c7;            /* frost-gray */

  /* ===== 색: 의미 ===== */
  --c-success:           #16a34a;            /* 부품 okDot — status 표시 (Hero/CodeBlock/Footer) */
  --c-danger:            #cf202f;            /* 도출 (키트 미정의) */

  /* ===== 폰트 / 폰트 두께 ===== */
  /* SPEC §3.1: 폰트는 테마 영역이 아님 — registry/fontsets/inter-firecrawl.{css,json} 참조. */

  /* ===== 타입 스케일 =====
     키트 토큰: display-lg 60 / display 52 / heading-lg 40 / heading 24 / subheading 20 /
                body-lg 16 / body 14 / caption 10.
     역할 매핑: display→t-display, display(52)→t-h1, heading-lg→t-h2, heading→t-h3,
                body-lg→t-body, body→t-body-sm, caption→t-caption. */
  --t-display:           60px;               /* 키트 display-lg */
  --t-h1:                52px;               /* 키트 display */
  --t-h2:                40px;               /* 키트 heading-lg */
  --t-h3:                24px;               /* 키트 heading */
  --t-body:              16px;               /* 키트 body-lg — 본문 가독성 */
  --t-body-sm:           14px;               /* 키트 body */
  --t-caption:           10px;               /* 키트 caption */

  /* ===== 간격 =====
     키트 --section-gap 164px — "the page breathes deliberately" (README).
     역할 스케일은 사이트 공통 4·8·12·16·24·32·48·64. */
  --s-1:                 4px;
  --s-2:                 8px;
  --s-3:                 12px;
  --s-4:                 16px;
  --s-5:                 24px;
  --s-6:                 32px;
  --s-7:                 48px;
  --s-8:                 64px;
  --s-section:           164px;              /* 키트 --section-gap — 의도된 호흡 */
  --s-container:         1200px;             /* 키트 --page-max-width */

  /* ===== radius =====
     키트: inputs 8 / xl 12 / cards 16 / 2xl-2 20 / buttons-tags 999. */
  --r-sm:                8px;                /* 키트 --radius-inputs */
  --r-md:                12px;               /* 키트 --radius-xl */
  --r-lg:                16px;               /* 키트 --radius-cards */
  --r-pill:              999px;              /* 키트 --radius-buttons / tags */

  /* ===== 그림자 =====
     키트의 shadow-xl (피처 카드 lift) / shadow-xl-3 (code-block surface).
     계약 단순화: card = shadow-xl, float = shadow-xl-3 일부 단을 합성. */
  --shadow-card:
    rgba(0, 0, 0, 0.02) 0px 40px 48px -20px,
    rgba(0, 0, 0, 0.03) 0px 32px 32px -20px,
    rgba(0, 0, 0, 0.03) 0px 16px 24px -12px,
    rgba(0, 0, 0, 0.03) 0px  0px  0px   1px;
  --shadow-float:
    rgba(0, 0, 0, 0.02) 0px  0px 44px   0px,
    rgba(0, 0, 0, 0.03) 0px 88px 56px -20px,
    rgba(0, 0, 0, 0.02) 0px 56px 56px -20px,
    rgba(0, 0, 0, 0.03) 0px 32px 32px -20px,
    rgba(0, 0, 0, 0.03) 0px 16px 24px -12px,
    rgba(0, 0, 0, 0.05) 0px  0px  0px   1px;
}