/*
 * THEME: gallery-white  (SPEC §3.2)
 * 출신: _inbox/gallery-white/tokens.css
 *
 * 톤: "Gallery wall at natural light" — 흰 캔버스 + 거대한 헤드라인 + 평면(no shadow) +
 *      한 단계 흐림(fog) 만으로 elevation 표현 + azure CTA 1회만 (rationed).
 *
 * 매핑표 (키트 변수 → 계약 변수):
 *   --color-ink         (#1d1d1f warm near-black)      → --c-ink
 *   --color-ink                                        → --c-body   (키트는 본문도 ink — gallery 컨벤션)
 *   --color-graphite    (#707070 secondary text)       → --c-muted
 *   --color-azure       (#0071e3 PRIMARY CTA)          → --c-action
 *   azure 살짝 밝게 (#0077ed btn-primary:hover 키트)    → --c-action-hover
 *   --color-snow        (#ffffff)                      → --c-on-action / --c-on-dark / --c-surface
 *   --color-cobalt-link (#0066cc inline links)         → --c-link
 *   --color-fog         (#f5f5f7 canvas)               → --c-canvas / --c-surface-soft (FeatureGrid fog 카드)
 *   --color-silver-mist (#e8e8ed dividers)             → --c-hairline
 *   --color-obsidian    (#000000 dark stage)           → --c-surface-dark
 *   --color-ink         (#1d1d1f washed black elev)    → --c-surface-dark-elev (도출 — dark stage 위 떠 있는 카드)
 *   --color-ink                                        → --c-border-strong (light theme 강조 경계)
 *   --color-caution     (#b64400 warning)              → --c-danger
 *   --color-azure                                      → --c-accent (키트의 brand accent 위치)
 *
 * 누락 / 도출:
 *   --c-success: 키트 미정의 — 가독성 위해 deep moss/green (#058327) 도출.
 *   --c-on-dark-muted: 키트는 dark-card 에서 rgba(255,255,255,0.66) 사용 — 동일 톤.
 *
 * 브랜드 장식 (§3.1 — 계약에 안 박고 theme-local 로 보존):
 *   --color-citrus/blush/indigo/silver  → --gw-citrus/blush/indigo/silver
 *   --gradient-citrus/indigo/blush/silver → --gw-gradient-*
 *   ColorShowcase 부품이 이 theme-local 변수를 직접 참조 — 부품은 gallery-white theme 전용.
 *
 * 타입 (gallery-white 시그니처: 96/56/40/24/17/14/12 — 키트 그대로):
 *   --text-display(96) → --t-display
 *   --text-heading-lg(56) → --t-h1
 *   --text-heading(40) → --t-h2
 *   --text-heading-sm(24) → --t-h3
 *   --text-body(17) → --t-body
 *   --text-body-sm(14) → --t-body-sm
 *   --text-caption(12) → --t-caption
 *
 * 간격 (--s-section 80 — README "long-scroll" 첫 단 패딩):
 *   키트 spacing-{4..64} → --s-1..8 그대로
 *   --section-gap-sm(80) → --s-section
 *   --page-max-width(1200) → --s-container
 *
 * Radii (28px가 시그니처 — README "the radius equals the inset"):
 *   --radius-sm(10) → --r-sm
 *   (18px 도출) → --r-md
 *   --radius-card(28) → --r-lg
 *   --radius-pill(999) → --r-pill
 *
 * 그림자 (README "No box-shadow. Anywhere."):
 *   --shadow-card / --shadow-float → none
 */

:root {
  /* ===== 색: 액션 ===== */
  --c-action:            #0071e3;         /* azure — 키트 시그니처 rationed CTA */
  --c-action-hover:      #0077ed;         /* 키트 .btn-primary:hover */
  --c-on-action:         #ffffff;
  --c-accent:            #0071e3;         /* 키트는 azure 가 유일한 brand accent */

  /* ===== 색: 텍스트 ===== */
  --c-ink:               #1d1d1f;         /* warm near-black */
  --c-body:              #1d1d1f;         /* 키트는 본문도 ink — gallery 컨벤션 */
  --c-muted:             #707070;         /* graphite */
  --c-on-dark:           #ffffff;
  --c-on-dark-muted:     rgba(255, 255, 255, 0.66);  /* dark-card eyebrow 톤 */
  --c-link:              #0066cc;         /* cobalt-link — inline link 전용 */

  /* ===== 색: 배경/표면 ===== */
  --c-canvas:            #f5f5f7;         /* fog — page canvas */
  --c-surface:           #ffffff;         /* snow — card surface (lifted) */
  --c-surface-soft:      #f5f5f7;         /* fog band (FeatureGrid card variant) */
  --c-surface-dark:      #000000;         /* obsidian — Dark Stage card */
  --c-surface-dark-elev: #1d1d1f;         /* 도출: dark 위 떠 있는 한 단 */

  /* ===== 색: 경계 ===== */
  --c-hairline:          #e8e8ed;         /* silver-mist */
  --c-border-strong:     #1d1d1f;         /* light theme: ink 가 강조 경계 */

  /* ===== 색: 의미 ===== */
  --c-success:           #058327;         /* 도출 (키트 미정의) */
  --c-danger:            #b64400;         /* caution */

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

  /* ===== 타입 스케일 ===== */
  --t-display:           96px;
  --t-h1:                56px;
  --t-h2:                40px;
  --t-h3:                24px;
  --t-body:              17px;
  --t-body-sm:           14px;
  --t-caption:           12px;

  /* ===== 간격 ===== */
  --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:           80px;            /* 키트 --section-gap-sm */
  --s-container:         1200px;          /* 키트 --page-max-width */

  /* ===== radius ===== */
  --r-sm:                10px;            /* 키트 --radius-sm */
  --r-md:                18px;            /* 도출 (sm 과 lg 사이) */
  --r-lg:                28px;            /* 키트 --radius-card — 시그니처 */
  --r-pill:              999px;

  /* ===== 그림자 ===== */
  /* README: "No box-shadow. Anywhere." — elevation = background-color differential. */
  --shadow-card:         none;
  --shadow-float:        none;

  /* ─────────────────────────────────────────────────────────────
   *  브랜드 장식 (§3.1 — 계약에 안 박고 theme-local 로만 보존).
   *  ColorShowcase 부품이 직접 참조.  다른 테마로 갈아끼우면 이 변수가 없어
   *  ColorShowcase 가 깨지는 게 정상 — 그 부품은 gallery-white theme 전용.
   * ───────────────────────────────────────────────────────────── */

  /* 제품 finish 스와치 (28px chip + gradient source) */
  --gw-citrus:  #dddc8c;
  --gw-blush:   #e8d0d0;
  --gw-indigo:  #596680;
  --gw-silver:  #e3e4e5;

  /* Full-bleed accent gradients (showcase band 전용) */
  --gw-gradient-citrus: linear-gradient(184deg, rgb(29,29,31)  0%, rgb(223,231,79) 33%, rgb(94,156,42)  66%, rgb(10,134,26)  95%);
  --gw-gradient-indigo: linear-gradient(184deg, rgb(29,29,31) 20%, rgb(168,211,251) 43%, rgb(0,18,249)   76%, rgb(37,53,224)  95%);
  --gw-gradient-blush:  linear-gradient(184deg, rgb(29,29,31) 20%, rgb(243,196,246) 43%, rgb(245,0,180)  76%, rgb(204,41,188) 95%);
  --gw-gradient-silver: linear-gradient(184deg, rgb(29,29,31)  0%, rgb(220,222,225) 45%, rgb(150,154,160) 80%, rgb(60,64,72)  100%);
}