/* =========================================================================
   tokens.css  —  3층 토큰 시스템 (Static Primitives + Contextual Roles)

   구조:
     1층  원시값 — 절대 색상. 라이트/다크와 무관하게 고정.
                  · gray 램프 (1–100): 단일 팔레트 (밝음→어두움)
                  · 흑·백, 포인트 컬러
     2층  역할   — 1층을 의미론적 이름으로 매핑.
                  :root = 라이트, .dark-mode = 다크.
                  모드 전환은 이 층에서만 일어남.
     3층  스케일 — --s, 타이포·간격. 색상 무관.

   Figma Variables 대응:
     1층 = Primitives 컬렉션
     2층 = Semantic 컬렉션 (Light / Dark 모드)
     3층 = Scale 컬렉션
   ========================================================================= */

/* One typography source for the full site and independently themed chat pages. */
@import url("/typography-tokens.css?v=20261101-chat-type-1");

:root {
    /* ------------------------------------------------------------------
       1층 · 원시값 — 절대 고정 (모드 전환에 영향받지 않음)
       ------------------------------------------------------------------ */

    /* 회색 램프 — 단일 팔레트 (1 밝음 → 100 어두움). 라이트·다크가 같은 램프를 쓴다. */
    --gray-1:   #FCFCFF;
    --gray-5:   #F1F1F3;
    --gray-10:  #E9E9EC;
    --gray-15:  #E4E4E7;
    --gray-20:  #CCCCCE;
    --gray-30:  #B7B7BB;
    --gray-40:  #A3A3A7;
    --gray-50:  #848487;
    --gray-60:  #636368;
    --gray-70:  #4D4D52;
    --gray-80:  #3A3A3D;
    --gray-90:  #252528;
    --gray-95:  #17171A;
    --gray-100: #010102;

    /* 흑·백 */
    --black: #000000;
    --white: #FFFFFF;

    /* 포인트 — Primary 램프 (10단계, 50 = 브랜드 기준색) */
    --primary-10:  #DDE9FD;
    --primary-20:  #B6D0FC;
    --primary-30:  #8FB7FA;
    --primary-40:  #689FF8;
    --primary-50:  #3B82F6;
    --primary-60:  #156AF4;
    --primary-70:  #0A58D7;
    --primary-80:  #0848B0;
    --primary-90:  #063684;
    --primary-100: #042458;

    /* 서브 — Secondary 퍼플 (5단계, 50 = 기준색) */
    --purple-10:   #D6C2FF;
    --purple-30:   #BA99FF;
    --purple-50:   #9C6DFF;
    --purple-70:   #590AFF;
    --purple-90:   #3800AD;

    /* 서브 — Secondary 틸 (5단계, 50 = 기준색) */
    --teal-10:     #C6F0EC;
    --teal-30:     #8AE0D8;
    --teal-50:     #4FD1C5;
    --teal-70:     #2CAA9E;
    --teal-90:     #1E7169;

    /* ------------------------------------------------------------------
       2층 · 역할 토큰 — 라이트 모드 매핑
       ------------------------------------------------------------------ */
    --bg-color:     var(--gray-5);
    --bg:           var(--gray-5);
    --card-bg:      var(--gray-1);
    --surface:      var(--gray-1);
    --panel:        var(--gray-10);
    --text-color:   var(--gray-95);
    --text-sub:     var(--gray-70);
    --dim-color:    var(--gray-60);
    --label-color:  var(--gray-50);
    --line-color:   var(--gray-15);
    --accent-color: var(--primary-50);
    --sub-color-1:  var(--purple-50);
    --sub-color-2:  var(--teal-50);
    --gray-ink:     var(--gray-95);

    /* ------------------------------------------------------------------
       3층 · 스케일
       ------------------------------------------------------------------ */
    --s: 1;

    /* 글꼴·타이포 크기·굵기 → typography-tokens.css */

    /* 간격 (전부 × var(--s)) : 4·8·12·16·24·32·48·64·96·128·160·192 */
    --space-1:  calc(4px   * var(--s));
    --space-2:  calc(8px   * var(--s));
    --space-3:  calc(12px  * var(--s));
    --space-4:  calc(16px  * var(--s));
    --space-5:  calc(24px  * var(--s));
    --space-6:  calc(32px  * var(--s));
    --space-7:  calc(48px  * var(--s));
    --space-8:  calc(64px  * var(--s));
    --space-9:  calc(96px  * var(--s));
    --space-10: calc(128px * var(--s));
    /* 섹션과 섹션 사이처럼 큰 간격 — 128 위가 없어 고를 수 없었다 */
    --space-11: calc(160px * var(--s));
    --space-12: calc(192px * var(--s));

    /* 하위호환 */
    --space-xs: var(--space-2);
    --space-sm: var(--space-4);
    --space-md: var(--space-6);
    --space-lg: var(--space-8);
    --space-xl: var(--space-10);
}

/* ----------------------------------------------------------------------
   2층 · 다크 모드 재매핑
   1층 원시값은 건드리지 않음. 역할 토큰만 다크 팔레트로 전환.
   ---------------------------------------------------------------------- */
.dark-mode {
    --bg-color:     var(--gray-100);
    --bg:           var(--gray-100);
    --card-bg:      var(--gray-95);
    --surface:      var(--gray-95);
    --panel:        var(--gray-90);
    --text-color:   var(--gray-5);
    --text-sub:     var(--gray-40);
    --dim-color:    var(--gray-50);
    --label-color:  var(--gray-60);
    --line-color:   var(--gray-80);
    --gray-ink:     var(--gray-5);
}

/* Viewport-based downscaling is disabled.
   Keep the base --s: 1 above; responsive layouts retain their own breakpoints. */