/* LinkLore 디자인 토큰 — 다크/민트 단일 정본
 * 출처: Claude Design "Linklore 서비스 디자인" / Spec Board (2026-06).
 * 규칙: 모든 컴포넌트 .css 는 이 변수만 참조 (No Tailwind / No CSS-in-JS, lr-?).
 * 색은 raw hex 박지 말고 var(--ll-*) 사용. */
:root {
  /* ── 브랜드 (민트) ── */
  --ll-brand: #6FE7C8;
  --ll-brand-fg: #06231C;                  /* 민트 표면 위 텍스트 (버튼 등) */
  --ll-brand-soft: rgba(111, 231, 200, 0.10);
  --ll-brand-border: rgba(111, 231, 200, 0.28);

  /* ── 배경 (어두운 → 밝은 레이어) ── */
  --ll-bg-page: #070A10;                    /* 최하단 페이지 */
  --ll-bg-base: #0A0E15;                    /* 카드/패널 기본 */
  --ll-bg-raised: #0D121B;                  /* 카드 위 요소 */
  --ll-bg-sunken: #0B0F18;                  /* 인풋/코드블록(눌린 면) */
  --ll-bg-header: #0B1019;                  /* 터미널/헤더 바 */

  /* ── 보더 ── */
  --ll-border-subtle: #141B26;
  --ll-border: #19212E;                     /* 기본 구분선 */
  --ll-border-card: #1B2330;
  --ll-border-strong: #1E2737;              /* 인풋/코드블록 */
  --ll-border-stronger: #2A3340;            /* 강조/dashed */

  /* ── 텍스트 ── */
  --ll-text-hi: #ECEEF1;                    /* 제목 */
  --ll-text: #CDD4DC;                       /* 강조 본문 */
  --ll-text-body: #9AA4B0;                  /* 일반 본문 */
  --ll-text-muted: #8A94A0;                 /* 보조 */
  --ll-text-low: #69727E;                   /* 캡션/메타 */
  --ll-text-faint: #5C6573;                 /* 플레이스홀더 */
  --ll-text-faintest: #3F4855;              /* 디바이더 라벨 */

  /* ── lore 레벨 시맨틱 ── */
  --ll-lv1: #6FE7C8;                         /* fact */
  --ll-lv2: #6FA8E7;                         /* decision */
  --ll-lv3: #A88FE7;                         /* rule */
  --ll-lv4: #E7C66F;                         /* invariant */

  /* ── status ── */
  --ll-status-active: #6FE7C8;
  --ll-status-draft: #69727E;
  --ll-status-deprecated: #E78F8F;

  /* ── role ── */
  --ll-role-owner: #6FE7C8;
  --ll-role-member: #6FA8E7;
  --ll-role-viewer: #69727E;

  /* ── 시맨틱 액센트 ── */
  --ll-success: #6FE7C8;
  --ll-danger: #E78F8F;
  --ll-warning: #E7C66F;
  --ll-info: #8FC7E7;
  --ll-purple: #A88FE7;

  /* ── 타이포 ── */
  --ll-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Noto Sans KR', sans-serif;
  --ll-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* 위계 상향 (2026-07 governor 실측: 78회 중 77%가 sm 이하 → 눌린 위계).
   * 본문/제목은 올리고, 메타(xs/2xs)는 12~13px 유지. mono 는 JetBrains Mono 그대로. */
  --ll-fs-hero: 44px;
  --ll-fs-h1: 32px;                          /* 페이지 h1 타이틀 */
  --ll-fs-h2: 22px;                          /* 섹션 제목 */
  --ll-fs-title: 20px;                       /* 카드/패널 제목 */
  --ll-fs-lg: 17px;
  --ll-fs-md: 16px;                          /* 본문 강조 */
  --ll-fs-base: 15px;                        /* 본문 기준 */
  --ll-fs-sm: 14px;
  --ll-fs-xs: 12px;                          /* 메타/라벨 (유지) */
  --ll-fs-2xs: 11px;                         /* 타임스탬프 (유지) */
  --ll-fs-stat: 30px;                        /* 통계/카운트 숫자 전용 (bold + tnum) */
  --ll-fw-regular: 400;
  --ll-fw-medium: 500;
  --ll-fw-semibold: 600;
  --ll-fw-bold: 700;
  --ll-fw-black: 800;
  --ll-tracking-mono: 0.04em;               /* mono 라벨 자간 */
  --ll-tracking-wide: 0.30em;               /* 로고/케이스 라벨 */

  /* ── spacing (4px 그리드) ── */
  --ll-space-1: 4px;
  --ll-space-2: 8px;
  --ll-space-3: 12px;
  --ll-space-4: 16px;
  --ll-space-6: 24px;
  --ll-space-8: 32px;

  /* ── radius ── */
  --ll-radius-sm: 6px;
  --ll-radius: 8px;
  --ll-radius-md: 10px;
  --ll-radius-lg: 12px;
  --ll-radius-xl: 14px;
  --ll-radius-pill: 999px;

  /* ── 그림자 (민트 글로우 — ★강조 카드용) ── */
  --ll-glow-brand: 0 0 0 1px rgba(111, 231, 200, 0.06), 0 20px 50px rgba(111, 231, 200, 0.04);

  /* ── 하위호환 별칭 (기존 페이지 .css 가 쓰던 옛 이름 → 새 값 매핑) ── */
  --ll-bg: var(--ll-bg-base);
  --ll-fg: var(--ll-text-hi);
  --ll-muted: var(--ll-text-low);
  --ll-accent: var(--ll-brand);
  --ll-accent-fg: var(--ll-brand-fg);
  --ll-space: var(--ll-space-4);
}

/* ── 라이트 모드 (.ll-light 토글, deploy/landing 테마 버튼이 document.documentElement에 부여) ──
 * 다크가 정본, 라이트는 오버라이드(하위 별칭은 var() 참조라 재선언 불필요 — 캐스케이드로 자동 반영).
 * 브랜드 민트(#6FE7C8)는 색 그대로 유지(governor 확정 — 임의 변경 금지) — 배경/보더/텍스트
 * 뉴트럴만 반전. */
:root.ll-light {
  --ll-brand: #6FE7C8;
  --ll-brand-fg: #06231C;
  --ll-brand-soft: rgba(111, 231, 200, 0.14);
  --ll-brand-border: rgba(111, 231, 200, 0.32);

  --ll-bg-page: #F7F8FA;
  --ll-bg-base: #FFFFFF;
  --ll-bg-raised: #FFFFFF;
  --ll-bg-sunken: #EEF1F4;
  --ll-bg-header: #F0F2F5;

  --ll-border-subtle: #ECEEF1;
  --ll-border: #E1E4E9;
  --ll-border-card: #DDE1E6;
  --ll-border-strong: #D0D5DC;
  --ll-border-stronger: #B8C0CA;

  --ll-text-hi: #10151C;
  --ll-text: #2B333E;
  --ll-text-body: #4B5563;
  --ll-text-muted: #616B78;
  --ll-text-low: #7C8694;
  --ll-text-faint: #99A2AE;
  --ll-text-faintest: #B7BFC9;

  --ll-lv1: #6FE7C8;
  --ll-lv2: #6FA8E7;
  --ll-lv3: #A88FE7;
  --ll-lv4: #E7C66F;

  --ll-status-active: #6FE7C8;
  --ll-status-draft: #7C8694;
  --ll-status-deprecated: #E78F8F;

  --ll-role-owner: #6FE7C8;
  --ll-role-member: #6FA8E7;
  --ll-role-viewer: #7C8694;

  --ll-success: #6FE7C8;
  --ll-danger: #E78F8F;
  --ll-warning: #E7C66F;
  --ll-info: #8FC7E7;
  --ll-purple: #A88FE7;

  --ll-glow-brand: 0 0 0 1px rgba(111, 231, 200, 0.10), 0 8px 24px rgba(16, 21, 28, 0.06);
}