/*
 * THEME: uber-design-system  (SPEC §3.2)
 * 출신: _inbox/uber-design-system/tokens.css  (+ README.md "Visual Foundations")
 *
 * 톤: light · "precise, functional transport UI on a crisp monochrome canvas"
 * 흑백(midnight-ink / canvas-white) 본문 + whisper-gray surface band + 단 하나의
 * 무채에 가까운 액센트(lagoon-mist teal) — 절대 텍스트나 작은 UI 엔 안 씀.
 * action 색이 검정 → on-action 텍스트가 흰색. 다른 light 키트들과 명확히 구별.
 *
 * 매핑표 (키트 변수 → 계약 변수):
 *   --color-midnight-ink (#000000)            → --c-action            (Uber 의 CTA 는 검정)
 *   #2b2b2b (README hover spec 'black→#2b2b2b')→ --c-action-hover
 *   --color-canvas-white (#ffffff)            → --c-on-action
 *   --color-lagoon-mist  (#9dcdd6)            → --c-accent            (단 하나의 chromatic — 일러스트 only)
 *   --color-midnight-ink (#000000)            → --c-ink
 *   --color-charcoal-text(#333333)            → --c-body              (키트 fg-secondary)
 *   --color-subtle-silver(#afafaf)            → --c-muted             (키트 fg-tertiary)
 *   --color-canvas-white (#ffffff)            → --c-on-dark
 *   --color-subtle-silver(#afafaf)            → --c-on-dark-muted     (Footer 의 link 색과 일치)
 *   --color-midnight-ink (#000000)            → --c-link              (a 기본 fg-primary 밑줄)
 *   --color-canvas-white (#ffffff)            → --c-canvas
 *   --color-whisper-gray (#f6f6f6)            → --c-surface
 *   #ececec (도출: surface 한 단 진하게, ServicesGrid hover)→ --c-surface-soft
 *   --color-midnight-ink (#000000)            → --c-surface-dark      (Footer 단 하나의 다크 영역)
 *   #2a2a2a (Footer 의 border-color 와 일관, dark 위 elev)→ --c-surface-dark-elev
 *   #ececec (Steps 의 borderLeft / Pricing card border 일관)→ --c-hairline
 *   --color-slate-shadow (#d6d6d6)            → --c-border-strong     (RateScreen tip 카드 border)
 *   #1f8a3a (도출: 키트 미정의, 의미색 success — 검정 시스템과 충돌 안 나는 차분한 톤)→ --c-success
 *   #c13515 (도출: 키트 미정의, 의미색 danger)→ --c-danger
 *
 * 누락:
 *   - hover/success/danger/dark-elev/surface-soft 는 키트에 명시값 없어 도출.
 *     도출 기준: README §Animation 의 hover spec 과 Pricing/Steps 의 hairline 값과 일관.
 *   - 키트의 --color-input-border-gray (#767676) 는 LogoStrip 의 글자 mute,
 *     UnderlineInput border, Newsletter caption 에 쓰임. 부품에서 --c-muted 로 흡수.
 *     (Uber 키트의 inputs 는 sections-product 격리이므로 mute/border 같은 톤으로 처리)
 *
 * 폰트:
 *   tokens.css 안 @import url(폰트) 는 CWV LCP 차단 — 금지.
 *   폰트 변수는 registry/fontsets/uber-design-system.{css,json} 으로 분리.
 *   키트는 UberMove(display) / UberMoveText(text) — 상용 비공개. Manrope/Inter 로 substitute.
 *
 * 타입 스케일:
 *   키트: caption 12 / body-sm 14 / body 16 / subheading 18 / heading-sm 20 / heading 24
 *        display 36 / display-lg 52.
 *   --t-display 는 키트 display-lg 52 그대로 — Uber 의 hero 가 80~96 안 가는 게 시그니처.
 *   nav/footer 의 컴팩트 sentinel 톤 유지.
 *
 * 간격:
 *   키트 4 px base, 4/8/12/16/20/24/28/32/36/48/64 → 사이트 공통 4/8/12/16/24/32/48/64 로 정렬.
 *   section gap 48~80 — README 의 mid-point 64 채택.
 *
 * Radius:
 *   키트: buttons/cards 8 / misc 12 / capsule 999. 그대로.
 *   --r-sm 8 (키트는 input 만 0 — 그건 부품 안에서 직접 0 으로 둠).
 *
 * 그림자:
 *   키트는 거의 없음 (button 미세, card 미세). 그대로 유지.
 */

:root {
  /* ===== 색: 액션 ===== */
  --c-action:            #000000;         /* midnight-ink — Uber CTA 는 black */
  --c-action-hover:      #2b2b2b;         /* README hover spec */
  --c-on-action:         #ffffff;         /* canvas-white on black */
  --c-accent:            #9dcdd6;         /* lagoon-mist — 단 하나의 chromatic, 일러스트 only */

  /* ===== 색: 텍스트 ===== */
  --c-ink:               #000000;         /* midnight-ink */
  --c-body:              #333333;         /* charcoal-text (키트 --fg-secondary) */
  --c-muted:             #afafaf;         /* subtle-silver (키트 --fg-tertiary) */
  --c-on-dark:           #ffffff;
  --c-on-dark-muted:     #afafaf;         /* Footer 의 mute link 와 일관 */
  --c-link:              #000000;         /* 기본 a 색 fg-primary, 밑줄로 강조 */

  /* ===== 색: 배경/표면 ===== */
  --c-canvas:            #ffffff;
  --c-surface:           #f6f6f6;         /* whisper-gray */
  --c-surface-soft:      #ececec;         /* 도출: surface 한 단 (ServicesGrid hover) */
  --c-surface-dark:      #000000;         /* Footer / Stats 의 단 하나의 다크 영역 */
  --c-surface-dark-elev: #2a2a2a;         /* 도출: Footer 의 가로선과 일관 */

  /* ===== 색: 경계 ===== */
  --c-hairline:          #ececec;         /* Steps borderLeft / Pricing card border 일관 */
  --c-border-strong:     #d6d6d6;         /* slate-shadow */

  /* ===== 색: 의미 ===== */
  --c-success:           #1f8a3a;         /* 도출: 검정 시스템과 충돌 안 나는 차분한 톤 */
  --c-danger:            #c13515;         /* 도출 (키트 미정의) */

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

  /* ===== 타입 스케일 =====
     키트: caption 12 / body-sm 14 / body 16 / subheading 18 / heading-sm 20 / heading 24
          display 36 / display-lg 52.
     Uber 의 hero 는 절대 80+ 안 감 — display-lg 52 가 시그니처. 그대로 유지. */
  --t-display:           52px;            /* 키트 display-lg — Uber hero */
  --t-h1:                36px;            /* 키트 display */
  --t-h2:                28px;            /* 키트 heading-lg ↔ display 사이 (히어로 외 섹션 헤딩) */
  --t-h3:                20px;            /* 키트 heading-sm */
  --t-body:              16px;            /* 키트 body */
  --t-body-sm:           14px;            /* 키트 body-sm */
  --t-caption:           12px;            /* 키트 caption */

  /* ===== 간격 =====
     키트 4 px base, 4/8/12/16/20/24/28/32/36/48/64.
     역할 스케일은 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:           64px;            /* 키트 section gap 48~80 의 mid */
  --s-container:         1200px;          /* 키트 --container-max */

  /* ===== radius =====
     키트: inputs 0 / buttons 8 / cards 8 / misc 12 / capsule 999. */
  --r-sm:                8px;             /* 키트 --radius-buttons (input 0 은 부품에서 직접 처리) */
  --r-md:                8px;             /* 키트 --radius-cards */
  --r-lg:                12px;            /* 키트 --radius-misc */
  --r-pill:              999px;           /* 키트 --radius-capsule */

  /* ===== 그림자 =====
     키트는 거의 없음 — README 'almost nothing'. 단 한 단계 button 미세 + nav hairline. */
  --shadow-card:         0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-float:        0 1px 2px rgba(0, 0, 0, 0.08);
}