/*
 * THEME: supabase  (SPEC §3.2)
 * 출신: _inbox/supabase/tokens.css
 *
 * 톤: dark · "Midnight Terminal Interface — dark, organized, quietly powerful workspace"
 *     키트 README: "No shadow-based elevation, no gradients (except brand mark), no emoji,
 *     no rounded-left-border slop." 깊이는 surface 색 시프트로만 표현.
 *     세 단의 다크 surface 위계: ebony-canvas(#121212 page) / steel(#2e2e2e card) /
 *     graphite(#242424 subtle/input).  Supabase Green(#3ecf8e) 은 헤드라인 split·
 *     eyebrow·dot·코드 keyword 의 secondary 강조 - --c-accent 로 받는다.
 *     실제 primary CTA 색은 forest-call-to-action(#006239) — --c-action 로 받는다.
 *     (브랜드는 두 톤: dark forest cta + bright green accent.)
 *
 * 매핑표 (키트 변수 → 계약 변수):
 *   --brand-cta (#006239 forest-call-to-action)        → --c-action
 *   (forest 살짝 밝게 — Hero hover 가 #007a47 hard-code) → --c-action-hover
 *   --fg-default (#fafafa whiteout)                     → --c-on-action
 *   --brand (#3ecf8e supabase-green)                    → --c-accent   (eyebrow·dot·split·code kw)
 *   --fg-default (#fafafa whiteout)                     → --c-ink
 *   --fg-highlight (#b4b4b4 silver-highlight)           → --c-body
 *   --fg-muted (#898989 mid-gray-text)                  → --c-muted
 *   --fg-default (#fafafa)                              → --c-on-dark        (다크 theme — ink 와 동일)
 *   --fg-muted (#898989)                                → --c-on-dark-muted  (다크 theme — muted 와 동일)
 *   --brand (#3ecf8e)                                   → --c-link    (키트 링크는 brand 색)
 *   --bg-canvas (#121212 ebony-canvas)                  → --c-canvas
 *   --bg-surface (#2e2e2e steel-surface)                → --c-surface       (카드 elevated)
 *   --bg-subtle  (#242424 graphite-base)                → --c-surface-soft  (input / alt 표면)
 *   --bg-deepest (#000000 midnight-abyss)               → --c-surface-dark  (가장 깊은 띠)
 *   --border-default (#393939 carbon-border)            → --c-surface-dark-elev (도출: dark 위 elev)
 *   --border-default (#393939 carbon-border)            → --c-hairline
 *   --border-strong  (#4d4d4d iron-outline)             → --c-border-strong
 *   --brand (#3ecf8e — 체크·okDot 의미 색)               → --c-success
 *   (키트 미정의)                                         → --c-danger
 *
 * 누락 / 도출:
 *   --c-surface-dark-elev — 키트 미정의. carbon-border(#393939) 로 도출, dark 위 떠 있는
 *      카드 자리 (다크 채택했을 때 surface-dark 보다 한 단 위).
 *   --c-danger — 키트 미정의 (supabase 는 성공/액션만 정의, danger 슬롯 없음). 표준 #ef4444 로.
 *
 * 브랜드 장식 색 (계약 안 함, 부품에 인라인으로 유지 — §3.1 / §5):
 *   --color-shadow-green (#002918) — 헤더 NEW/POPULAR 태그 배경 (Hero pill, Pricing tag).
 *      Supabase 시그니처 — green chip 의 깊은 톤. 치환하면 정체성 손실.
 *   rgba(62, 207, 142, 0.30) — border-brand (CTA 버튼 테두리 미세 글로우).
 *      브랜드 그린 30% 알파 — 데코.
 *   rgba(62, 207, 142, 0.05) — PricingCard highlight gradient 시작 (위→아래).
 *      브랜드 그린 5% 알파 — popular tier 의 살짝 떠오르는 톤. 데코.
 *   rgba(18, 18, 18, 0.8) — Nav 의 frosted glass bg (backdrop-filter blur 위에).
 *      ebony-canvas 80% 알파 — 데코.
 *   rgba(250, 250, 250, 0.027) — Auth/CTA input bg (whiteout 2.7% 알파).
 *      다크 위 거의 안 보이는 input surface. 데코.
 *   #ff5f57 / #ffbd2e / #28c940 — CodeSection 의 macOS window dot.
 *      플랫폼 시그니처 색 — 치환 불가.
 *
 * 타입 스케일: 키트 정의 그대로 적용.
 *   text-display 72 → --t-display.  키트 text-heading-lg 36 → --t-h2 (모든 section title
 *   이 clamp(28, 4vw, 36) 사용 — 36 이 상한).  --t-h1 은 키트 미정의 → display 와 h2 의
 *   중간 48 로 도출 (브랜드 페이지에서 hero 외 큰 헤드라인 자리 대비).
 *
 * 간격: 키트 spacing 8/16/24/32/40/48/64/80/96/112/128/224 의 8 base.  계약 4·8·12·16·24·
 *   32·48·64 스케일에 대응 (--s-1=4 는 키트 미정의 → 표준 도출).  --s-section=96 — 키트
 *   대부분 section 패딩이 96 (hero/cta 만 128).
 */

:root {
  /* ===== 색: 액션 ===== */
  --c-action:            #006239;            /* forest-call-to-action — primary CTA bg */
  --c-action-hover:      #007a47;            /* 도출: forest 살짝 밝게 (Hero hover hard-code) */
  --c-on-action:         #fafafa;            /* whiteout */
  --c-accent:            #3ecf8e;            /* supabase-green — eyebrow·dot·headline split·코드 kw·체크 */

  /* ===== 색: 텍스트 ===== */
  --c-ink:               #fafafa;            /* whiteout — 다크 위 헤드라인/본문 */
  --c-body:              #b4b4b4;            /* silver-highlight */
  --c-muted:             #898989;            /* mid-gray-text */
  --c-on-dark:           #fafafa;            /* 다크 theme — ink 와 동일 */
  --c-on-dark-muted:     #898989;            /* 다크 theme — muted 와 동일 */
  --c-link:              #3ecf8e;            /* 키트 링크 = brand */

  /* ===== 색: 배경/표면 ===== */
  --c-canvas:            #121212;            /* ebony-canvas — page */
  --c-surface:           #2e2e2e;            /* steel-surface — elevated card */
  --c-surface-soft:      #242424;            /* graphite-base — input / alt 표면 */
  --c-surface-dark:      #000000;            /* midnight-abyss — 가장 깊은 띠 */
  --c-surface-dark-elev: #393939;            /* 도출: dark 위 떠 있는 카드 (carbon-border 톤) */

  /* ===== 색: 경계 ===== */
  --c-hairline:          #393939;            /* carbon-border — 기본 경계 */
  --c-border-strong:     #4d4d4d;            /* iron-outline */

  /* ===== 색: 의미 ===== */
  --c-success:           #3ecf8e;            /* brand green — 체크/okDot 표시 */
  --c-danger:            #ef4444;            /* 도출 (키트 미정의) */

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

  /* ===== 타입 스케일 =====
     키트: caption 12 / body-sm 14 / body 16 / subheading 18 / heading 24 / heading-lg 36 / display 72.
     역할 매핑: display→t-display, (도출 48)→t-h1, heading-lg→t-h2, heading→t-h3,
                body→t-body, body-sm→t-body-sm, caption→t-caption. */
  --t-display:           72px;               /* 키트 text-display — hero headline (clamp 상한) */
  --t-h1:                48px;               /* 도출 (키트 미정의 — display 와 h2 사이) */
  --t-h2:                36px;               /* 키트 text-heading-lg — 모든 section title 의 clamp 상한 */
  --t-h3:                24px;               /* 키트 text-heading */
  --t-body:              16px;               /* 키트 text-body */
  --t-body-sm:           14px;               /* 키트 text-body-sm */
  --t-caption:           12px;               /* 키트 text-caption */

  /* ===== 간격 =====
     키트 8 base — spacing-8/16/24/32/40/48/64/80/96/112/128/224.
     역할 4·8·12·16·24·32·48·64 (4 는 키트 미정의 도출). */
  --s-1:                 4px;                /* 도출 (키트 미정의) */
  --s-2:                 8px;                /* 키트 spacing-8 */
  --s-3:                 12px;               /* 도출 (키트 미정의 — Nav action gap) */
  --s-4:                 16px;               /* 키트 spacing-16 */
  --s-5:                 24px;               /* 키트 spacing-24 */
  --s-6:                 32px;               /* 키트 spacing-32 */
  --s-7:                 48px;               /* 키트 spacing-48 */
  --s-8:                 64px;               /* 키트 spacing-64 */
  --s-section:           96px;               /* 키트 대부분 section 의 세로 패딩 */
  --s-container:         1200px;             /* 키트 --container-max */

  /* ===== radius =====
     키트: buttons/inputs 6 / cards 16 / pill 9999. */
  --r-sm:                6px;                /* 키트 --radius-buttons / inputs */
  --r-md:                12px;               /* 도출 (키트 code-panel border-radius 12) */
  --r-lg:                16px;               /* 키트 --radius-cards */
  --r-pill:              9999px;             /* 키트 --radius-pill */

  /* ===== 그림자 =====
     키트 README: "Supabase avoids shadow-based elevation; depth comes from background
     color shifts." → 카드 그림자는 거의 없음.  키트 --shadow-sm 만 정의 (subtle button).
     --shadow-card 는 키트 미정의 → 그림자 없음 으로 두기엔 위험 → 미세 그림자 도출.
     --shadow-float 도 키트 미정의 → 한 단 위 도출. */
  --shadow-card:
    rgba(0, 0, 0, 0.10) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.10) 0px 2px 4px -2px;
  --shadow-float:
    rgba(0, 0, 0, 0.30) 0px 16px 32px -8px,
    rgba(0, 0, 0, 0.20) 0px 8px 16px -4px,
    rgba(0, 0, 0, 0.10) 0px 2px 4px -2px;
}