/* ════════════════════════════════════════════════════════════════
   티옴타 토큰 정본 (Tiomta Tokens) v2.0 — 2층 체계
   ──────────────────────────────────────────────────────────────
   1층 = 원색 램프(brass·choco·cream·ink neutral, 라이트/다크 공용)
   2층 = 의미 토큰(bg·surface·text·accent·상태·말풍선·코드) — 램프 참조
   컴포넌트는 의미 토큰만 소비. 램프 직접 참조·인라인 hex 금지(SVG 예외).
   다크 = 의미 토큰을 램프 반대 단계로 재바인딩(색 반전 아님).
   앵커값 출처: 티옴타디자인표준.css v1.0(brass #B58A4A · choco #3B2A1D · cream #F4EFE2).
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ 1층 · 원색 램프 ═══ */
  /* brass(골드) 램프 — 앵커 500=#B58A4A */
  --brass-50:  #FBF6EC;
  --brass-100: #F3E9D4;
  --brass-200: #E7D3AC;
  --brass-300: #D8BE86;
  --brass-400: #C6A264;
  --brass-500: #B58A4A;   /* 앵커(정본 gold) */
  --brass-600: #9C7539;
  --brass-700: #7E5E2D;
  --brass-800: #5C4522;
  --brass-900: #3B2C16;

  /* choco 램프 — 앵커 700=#3B2A1D */
  --choco-100: #E8DDD2;
  --choco-200: #C9B6A3;
  --choco-300: #9C8067;
  --choco-400: #6E5641;
  --choco-500: #4C3829;
  --choco-600: #3B2A1D;   /* 앵커(정본 choco) */
  --choco-700: #2C1E13;
  --choco-800: #211711;
  --choco-900: #180F0A;

  /* cream(웜 아이보리) 램프 */
  --cream-50:  #FDFBF6;
  --cream-100: #FBF7EE;
  --cream-200: #F4EFE2;
  --cream-300: #ECE5D5;
  --cream-400: #E2D8C4;

  /* ink(중립 잉크) 램프 — 웜 그레이 */
  --ink-900: #2B2018;
  --ink-700: #5C4C3C;
  --ink-500: #8A7B65;
  --ink-400: #978872;

  /* 상태 앵커 */
  --hue-success: #4E8C5A;
  --hue-warning: #C08842;
  --hue-danger:  #B5524A;
  --hue-info:    #6E6A8C;

  /* ═══ 2층 · 의미 토큰 (라이트) ═══ */
  --t-bg:          var(--cream-200);   /* 앱 바닥 */
  --t-surface-1:   var(--cream-100);   /* 본문 캔버스 */
  --t-surface-2:   var(--cream-50);    /* 카드 */
  --t-surface-3:   #FFFFFF;            /* 카드 위 카드·팝오버 */
  --t-bg-hover:    var(--cream-300);

  --t-text:        var(--ink-900);     /* 1차(아껴 씀) */
  --t-text-2:      var(--ink-700);     /* 2차(화면 다수) */
  --t-text-muted:  var(--ink-500);     /* 3차 */
  --t-on-accent:   var(--cream-50);

  --t-accent:      var(--brass-500);
  --t-accent-hover:var(--brass-600);
  --t-accent-soft: rgba(181,138,74,0.12);
  --t-accent-wash: var(--brass-100);

  --t-brand:       var(--choco-600);   /* 강조 면(히어로·활성탭·주버튼) */
  --t-brand-hover: var(--choco-500);

  --t-border:      rgba(43,32,24,0.12);
  --t-border-strong: rgba(43,32,24,0.20);

  --t-success: var(--hue-success);
  --t-warning: var(--hue-warning);
  --t-danger:  var(--hue-danger);
  --t-info:    var(--hue-info);
  --t-danger-wash:  #FBEAEA;
  --t-warning-wash: #FDF1DC;
  --t-info-wash:    #E9E7F2;

  --t-bubble-me:    var(--choco-600);
  --t-bubble-other: var(--cream-50);
  --t-code-bg:      rgba(43,32,24,0.05);
  --t-code-ink:     var(--brass-700);
  --t-overlay:      rgba(43,32,24,0.44);

  /* 타이포 스케일(역할별 7단 — 형태타이포규칙 SSOT) */
  --t-fs-title: 19px;  --t-fw-title: 800;
  --t-fs-num:   18px;  --t-fw-num:   800;
  --t-fs-body:  16px;  --t-fw-body:  500;   /* 본문 하한 */
  --t-fs-sub:   15px;
  --t-fs-input: 16px;                        /* iOS 줌 방지 하한 */
  --t-fs-tbl:   12.5px;
  --t-fs-meta:  11.5px;
  --t-lh-body: 1.55;   --t-lh-tight: 1.2;

  /* 라운드 상한(라운드>높이¼ 금지) */
  --t-r-panel: 14px; --t-r-card: 12px; --t-r-tile: 10px; --t-r-swatch: 5px; --t-r-pill: 999px;

  /* 모션 */
  --t-ease: cubic-bezier(0.22,0.61,0.36,1);
  --t-dur:  180ms;

  color-scheme: light;
}

/* ═══ 다크 — 의미 토큰만 재바인딩(램프 반대 단계) ═══ */
:root[data-theme="dark"] {
  --t-danger:      #E0857C;   /* 다크에서 텍스트 대비 확보(라이트 #B5524A는 다크 3.2:1) */
  --hue-danger:    #E0857C;
  --t-bg:          var(--choco-900);
  --t-surface-1:   var(--choco-800);
  --t-surface-2:   #241A13;
  --t-surface-3:   #2C2017;
  --t-bg-hover:    #34271D;

  --t-text:        #F4ECE0;
  --t-text-2:      #CBB9A6;
  --t-text-muted:  #998874;
  --t-on-accent:   var(--choco-900);

  --t-accent:      var(--brass-400);
  --t-accent-hover:var(--brass-300);
  --t-accent-soft: rgba(198,162,100,0.16);
  --t-accent-wash: rgba(198,162,100,0.14);

  --t-brand:       var(--brass-400);
  --t-brand-hover: var(--brass-300);

  --t-border:      rgba(244,236,224,0.12);
  --t-border-strong: rgba(244,236,224,0.22);

  --t-danger-wash:  rgba(181,82,74,0.18);
  --t-warning-wash: rgba(192,136,66,0.18);
  --t-info-wash:    rgba(110,106,140,0.20);

  --t-bubble-me:    var(--brass-600);
  --t-bubble-other: #2C2017;
  --t-code-bg:      rgba(244,236,224,0.06);
  --t-code-ink:     var(--brass-300);
  --t-overlay:      rgba(0,0,0,0.55);

  color-scheme: dark;
}

/* 시스템 다크(명시 선택 없을 때) — 라이트 고정 서비스가 아니면 따름 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --t-bg: var(--choco-900); --t-surface-1: var(--choco-800); --t-surface-2:#241A13;
    --t-surface-3:#2C2017; --t-bg-hover:#34271D;
    --t-text:#F4ECE0; --t-text-2:#CBB9A6; --t-text-muted:#998874; --t-on-accent:var(--choco-900);
    --t-accent:var(--brass-400); --t-accent-hover:var(--brass-300);
    --t-accent-soft:rgba(198,162,100,0.16); --t-accent-wash:rgba(198,162,100,0.14);
    --t-brand:var(--brass-400); --t-brand-hover:var(--brass-300);
    --t-border:rgba(244,236,224,0.12); --t-border-strong:rgba(244,236,224,0.22);
    --t-bubble-me:var(--brass-600); --t-bubble-other:#2C2017;
    --t-code-bg:rgba(244,236,224,0.06); --t-code-ink:var(--brass-300); --t-overlay:rgba(0,0,0,0.55);
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}