/*
 * THEME: workable  (SPEC §3.2)
 * 출신: _inbox/workable/tokens.css
 *
 * 톤: light(cream canvas) · "warm porcelain + deep forest accent + fresh-teal pop" · grown-up HR / b2b / direct / pragmatic
 *
 * 매핑표 (키트 변수 → 계약 변수):
 *   --color-canvas-porcelain  #fff5ee                    → --c-canvas
 *   --color-white             #ffffff                    → --c-surface
 *   (피치 톤 살짝 어두운 cream — 섹션 리듬용, 도출)        → --c-surface-soft #fbe9d9
 *   --color-forest-canopy     #012620                    → --c-surface-dark   (Hero/Footer 다크 영역)
 *   (forest 위 elevated card — 도출)                      → --c-surface-dark-elev #053a30
 *
 *   --color-midnight-ink      #0f161e                    → --c-ink            (primary text)
 *   --color-harbor-mist       #333942                    → --c-body           (본문)
 *   --color-muted-sage        #00544c                    → --c-muted          (light 위 흐린 텍스트 / eyebrow pipeline 라벨)
 *   --color-white             #ffffff                    → --c-on-dark
 *   rgba(255,255,255,0.6) (footer/hero 본문톤 평균값)     → --c-on-dark-muted  #ffffff/0.6 도출
 *   --color-deep-teal         #004038                    → --c-link           (링크 hover · accent text)
 *
 *   --border-subtle  rgba(15,22,30,0.12)                 → --c-hairline
 *   --color-midnight-ink                                 → --c-border-strong  (kit border-strong = midnight-ink)
 *
 *   --action-primary-bg       #004038 (deep-teal)        → --c-action
 *   --action-primary-hover    #012620 (forest-canopy)    → --c-action-hover
 *   --action-primary-text     #ffffff                    → --c-on-action
 *   --color-fresh-teal        #00f5dc                    → --c-accent         (브랜드 시그니처 accent — Hero/Footer primary CTA · Pricing 'Premier' bg)
 *
 *   --c-success / --c-danger  : 키트 미정의 — Workable 톤(spring-bud green / mandarin) 에서 도출.
 *
 * 누락/도출:
 *   - surface-soft, surface-dark-elev, on-dark-muted, success, danger 는 키트 명시값 없어 톤 맞춰 도출.
 *   - tokens.css 의 폰트/타이포 영역(--font-sans/-serif, --text-*, --fw-*)은 fontsets/opensans-workable 로 분리 (§3.1.5).
 *
 * 브랜드 장식색 (계약 안 함 — 부품에 raw hex 유지, §3.1):
 *   --color-soft-peach #fde8ce, --color-muted-mandarin #ffdcbf, --color-sky-haze #bee9f4,
 *   --color-lime-glow #d5ff4d, --color-spring-bud #7edcaf
 *   FeatureGrid tile/Testimonial frame/Pricing badge bg/avatar 그라데이션 등에서 그대로 사용.
 *
 * 타입 스케일: 키트 7단(body-sm…display) → 계약 7단으로 동결.
 *   --text-display    72px → --t-display    72
 *   --text-heading-lg 56px → --t-h1         56  (FG/Pricing 섹션 헤드라인)
 *   --text-heading    32px → --t-h2         32  (Testimonial blockquote)
 *   --text-heading-sm 24px → --t-h3         24  (카드 헤드라인)
 *   --text-body       18px → --t-body       18
 *   --text-body-sm    16px → --t-body-sm    16
 *   (eyebrow 11~13 평균)   → --t-caption    12
 *   ※ SplitFeature 48 / Footer-CTA 40 은 가장 가까운 --t-h1 56 으로 round-up — 8px 톤 손실 수용.
 *
 * 간격: 키트 8 / 16 / 24 / 32 / 40 / 64 / 88 / 104 → 계약 4·8·12·16·24·32·48·64 로 통일.
 *   --spacing-88 → --s-section 88px (Workable 섹션 패딩 기본)
 *
 * radius: 키트 sm/lg/2xl/3xl(badges 25px) → 계약 sm/md/lg/pill 4단.  카드 표준 16(2xl) 채택, 25px badges 는 pill 흡수.
 *
 * shadow: 키트 미정의 → midnight-ink 계열로 도출 (card 한 단 / float 한 단).
 */

:root {
  /* ===== 색: 액션 ===== */
  --c-action:            #004038;                /* deep-teal — 키트 action-primary-bg */
  --c-action-hover:      #012620;                /* forest-canopy */
  --c-on-action:         #ffffff;
  --c-accent:            #00f5dc;                /* fresh-teal — 브랜드 시그니처 (Hero CTA · Pricing 'Premier') */

  /* ===== 색: 텍스트 ===== */
  --c-ink:               #0f161e;                /* midnight-ink */
  --c-body:              #333942;                /* harbor-mist */
  --c-muted:             #00544c;                /* muted-sage — eyebrow / pipeline 라벨에 자주 */
  --c-on-dark:           #ffffff;
  --c-on-dark-muted:     rgba(255, 255, 255, 0.6);   /* 도출: Hero footnote/Footer 본문 톤 평균 */
  --c-link:              #004038;                /* deep-teal — kit a:hover */

  /* ===== 색: 배경/표면 ===== */
  --c-canvas:            #fff5ee;                /* canvas-porcelain — 페이지 기본 */
  --c-surface:           #ffffff;                /* card / surface */
  --c-surface-soft:      #fbe9d9;                /* 도출: 살짝 어두운 cream — 섹션 리듬용 */
  --c-surface-dark:      #012620;                /* forest-canopy — Hero / Footer */
  --c-surface-dark-elev: #053a30;                /* 도출: forest 위 떠 있는 카드 (Footer 안 CTA 박스) */

  /* ===== 색: 경계 ===== */
  --c-hairline:          rgba(15, 22, 30, 0.12); /* border-subtle */
  --c-border-strong:     #0f161e;                /* midnight-ink — kit border-strong */

  /* ===== 색: 의미 ===== */
  --c-success:           #1f7a4a;                /* 도출: spring-bud 톤 다운 (텍스트용 contrast 확보) */
  --c-danger:            #b3471e;                /* 도출: mandarin 톤 다운 (텍스트용) */

  /* ===== 폰트 / 폰트 두께 ===== */
  /* SPEC §3.1.5: 폰트는 테마 영역이 아님 — registry/fontsets/opensans-workable.{css,json} 참조.
     Workable 은 sans(Open Sans 대체) + serif(Source Serif 4) 두 family — fontset 에 --f-serif 포함. */

  /* ===== 타입 스케일 ===== */
  --t-display:           72px;        /* hero headline (kit --text-display) */
  --t-h1:                56px;        /* 섹션 헤드라인 (kit --text-heading-lg) */
  --t-h2:                32px;        /* 블록쿼트 / 큰 카드 (kit --text-heading) */
  --t-h3:                24px;        /* 카드 헤드라인 (kit --text-heading-sm) */
  --t-body:              18px;        /* 본문 (kit --text-body) */
  --t-body-sm:           16px;        /* 작은 본문 / 버튼 라벨 (kit --text-body-sm) */
  --t-caption:           12px;        /* eyebrow / footnote */

  /* ===== 간격 ===== */
  --s-1:                 4px;
  --s-2:                 8px;         /* kit --spacing-8 */
  --s-3:                 12px;
  --s-4:                 16px;        /* kit --spacing-16 */
  --s-5:                 24px;        /* kit --spacing-24 */
  --s-6:                 32px;        /* kit --spacing-32 / card-padding */
  --s-7:                 48px;        /* kit ~spacing-40 round-up */
  --s-8:                 64px;        /* kit --spacing-64 */
  --s-section:           88px;        /* kit --spacing-88 — Workable 섹션 패딩 기본 */
  --s-container:         1200px;

  /* ===== radius ===== */
  --r-sm:                4px;         /* kit --radius-sm */
  --r-md:                8px;         /* kit --radius-lg (navigation) */
  --r-lg:                16px;        /* kit --radius-2xl — 카드/버튼 표준 */
  --r-pill:              999px;       /* kit --radius-3xl=25px 도 pill 로 흡수 */

  /* ===== 그림자 (키트 미정의 — midnight-ink 계열 도출) ===== */
  --shadow-card:         0 4px 12px rgba(15, 22, 30, 0.06);
  --shadow-float:        0 16px 40px rgba(15, 22, 30, 0.10);
}