/* crowny-tokens.css — Crowny 생태계 공유 디자인 토큰 v1
 *
 * 단일 진실(SSOT): 4 서비스(crowny.org · abti · amti · tiomta)가 같은 토큰 사용.
 * 라이트(기본) + 다크(prefers-color-scheme + data-theme) + 모바일 변수 일괄.
 *
 * 사용:
 *   <link rel="stylesheet" href="/css/crowny-tokens.css">
 *   .my-card { background: var(--c-bg-card); color: var(--c-text); }
 *
 * 네임스페이스: --c-* (Crowny). 충돌 회피 + 가독성.
 * 동반: 토큰.한선 (학습DB 정본)
 */

:root {
  /* ── 배경 계층 (라이트) ───────────────────────────────────── */
  --c-bg:         #FAF9F7;   /* 페이지 본 배경 */
  --c-bg-soft:    #F4F1ED;   /* 카드 단계 1 */
  --c-bg-card:    #FFFFFF;   /* 카드 단계 2 / 입력 */
  --c-bg-hover:   #EEEAE4;   /* 호버 */
  --c-bg-active:  #E8E3DC;   /* 활성 */

  /* ── 테두리 ──────────────────────────────────────────────── */
  --c-border:        #E5E2DD;
  --c-border-strong: #D4D0C8;

  /* ── 텍스트 ──────────────────────────────────────────────── */
  --c-text:      #1A1A1A;    /* 본문 */
  --c-text-dim:  #6B6B6B;    /* 보조 */
  --c-text-mute: #A0A0A0;    /* 흐림 */

  /* ── 강조 (Claude.ai 골드) ─────────────────────────────── */
  --c-accent:      #C9A961;
  --c-accent-dim:  #A08840;
  --c-accent-soft: rgba(201,169,97,0.10);
  --c-accent-glow: rgba(201,169,97,0.22);

  /* ── 시맨틱 컬러 ─────────────────────────────────────────── */
  --c-success:  #22A06B;   /* T 컬러 (티) */
  --c-warn:     #D4743A;
  --c-danger:   #D93025;
  --c-info:     #2979C9;
  --c-purple:   #7C6CDB;   /* U 컬러 (음) */

  /* ── 그림자 ──────────────────────────────────────────────── */
  --c-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --c-shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --c-shadow-lg: 0 12px 32px rgba(0,0,0,.13), 0 4px 8px rgba(0,0,0,.07);
  --c-shadow-xl: 0 24px 56px rgba(0,0,0,.16), 0 8px 16px rgba(0,0,0,.08);

  /* ── 모서리 ──────────────────────────────────────────────── */
  --c-radius-sm:   4px;
  --c-radius:      8px;
  --c-radius-lg:   12px;
  --c-radius-xl:   16px;
  --c-radius-pill: 999px;

  /* ── 폰트 ────────────────────────────────────────────────── */
  --c-font: 'Söhne', 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', system-ui, sans-serif;
  --c-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;

  /* ── 모션 ────────────────────────────────────────────────── */
  --c-duration-fast: 150ms;
  --c-duration:      250ms;
  --c-duration-slow: 400ms;
  --c-ease:          cubic-bezier(.4, 0, .2, 1);

  /* ── 레이아웃 폭 ─────────────────────────────────────────── */
  --c-content-max:   720px;
  --c-content-wide: 1080px;
  --c-sidebar-w:     260px;

  /* ── 4상 균형 3진 컬러 (티옴타 표준) ────────────────────── */
  --c-t-color: #22A06B;   /* T: 티 (긍/생성) */
  --c-o-color: #C9A961;   /* O: 옴 (중/조정) */
  --c-a-color: #D93025;   /* A: 타 (반/소멸) */
  --c-u-color: #7C6CDB;   /* U: 음 (구분자) */

  --c-t-soft:  rgba(34,160,107,0.10);
  --c-o-soft:  rgba(201,169,97,0.12);
  --c-a-soft:  rgba(217,48,37,0.10);
  --c-u-soft:  rgba(124,108,219,0.10);

  /* ── 이전 네임스페이스 호환 (각 서비스에서 사용 중인 이름 → --c-*로 매핑) ─ */
  --eco-bg-card:  var(--c-bg-card);
  --eco-border:   var(--c-border);
  --eco-text:     var(--c-text);
  --eco-text-dim: var(--c-text-dim);
  --eco-accent:   var(--c-accent);
  --eco-hover:    var(--c-bg-hover);
}

/* ── 다크 모드 (data-theme="dark") ──────────────────────────── */
[data-theme="dark"] {
  --c-bg:         #0F0D14;
  --c-bg-soft:    #14111C;
  --c-bg-card:    #1A1622;
  --c-bg-hover:   #221C2E;
  --c-bg-active:  #2A2435;

  --c-border:        #2A2435;
  --c-border-strong: #3A3445;

  --c-text:      #ECECF1;
  --c-text-dim:  #B4B4C0;
  --c-text-mute: #7C7C8A;

  --c-accent:      #D9B870;
  --c-accent-dim:  #C9A961;
  --c-accent-soft: rgba(217,184,112,0.12);
  --c-accent-glow: rgba(217,184,112,0.25);

  --c-success: #34D399;
  --c-warn:    #FB923C;
  --c-danger:  #EF4444;
  --c-info:    #60A5FA;
  --c-purple:  #9B8BE6;

  --c-shadow-sm: 0 1px 3px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.18);
  --c-shadow-md: 0 4px 12px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.22);
  --c-shadow-lg: 0 12px 32px rgba(0,0,0,.40);
  --c-shadow-xl: 0 24px 56px rgba(0,0,0,.50);

  --c-t-color: #34D399;
  --c-o-color: #E0C078;
  --c-a-color: #EF4444;
  --c-u-color: #9B8BE6;
  --c-t-soft:  rgba(52,211,153,0.12);
  --c-o-soft:  rgba(224,192,120,0.12);
  --c-a-soft:  rgba(239,68,68,0.12);
  --c-u-soft:  rgba(155,139,230,0.12);
}

/* ── 다크 모드 자동 감지 (사용자가 data-theme 설정 안 했을 때) ──── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:         #0F0D14;
    --c-bg-soft:    #14111C;
    --c-bg-card:    #1A1622;
    --c-bg-hover:   #221C2E;
    --c-border:     #2A2435;
    --c-text:       #ECECF1;
    --c-text-dim:   #B4B4C0;
    --c-text-mute:  #7C7C8A;
    --c-accent:     #D9B870;
  }
}

/* ── 모바일 (≤480px) 토큰 ───────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --c-content-max:  100vw;
    --c-content-wide: 100vw;
    --c-sidebar-w:    100vw;
    --c-radius:       6px;
    --c-radius-lg:    10px;
  }
}

/* ── 접근성: 모션 감소 사용자 ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --c-duration-fast: 0ms;
    --c-duration:      0ms;
    --c-duration-slow: 0ms;
  }
}