/* Observatory — Aurora Ledger 토큰 (루트 CLAUDE.md 의 표가 정본이다 · Twinkle SNS 의 정본에서 가져왔다)
 *
 * 한 벌은 한 번만 적는다: 값은 light-dark() 한 줄에 두고,
 * 테마를 직접 고르는 자리는 color-scheme 만 못 박는다.
 *
 * light-dark() 는 **색**만 돌려준다 — 퍼센트 자리에 쓰면 선언이 통째로 무효가 되고
 * 브라우저는 오류 없이 «없는 값»으로 넘어간다(이모작 2026-08-27). «테마마다 다른 옅기»는
 * color-mix 를 두 번 접어 light-dark 에 넣는다. */

:root {
  color-scheme: light dark;

  /* 원색 두 벌 — 테마마다 갈리는 값은 여기서 한 번만 적는다 */
  --ink-l: #21182D;  --ink-d: #FAF7FF;
  --pri-l: #7040D9;  --pri-d: #986CF4;

  /* ── Neutral — 라이트는 순수한 회색, 다크는 Dusk ──────────
   * Twinkle SNS 는 «일하는 자리»다 — 사람이 주제를 넣고 성과를 읽으러 오므로 판은 물러나고,
   * «지금 누를 것» 하나만 색을 가진다. 넓게 깔리는 것은 물들지 않는다. 잉크는 물든 채로 둔다. */
  --bg:             light-dark(#F8F8F8, #110D19);
  --surface:        light-dark(#FFFFFF, #1C1727);
  --surface-sunk:   light-dark(#F4F4F5, #15111E);
  --text:           light-dark(var(--ink-l), var(--ink-d));
  --text-muted:     light-dark(#71687D, #B1A8BF);

  /* 불투명도 사다리 — 88 / 70 / 50 / 35 / 20 / 8% */
  --text-88: color-mix(in srgb, var(--text) 88%, transparent);
  --text-70: color-mix(in srgb, var(--text) 70%, transparent);
  --text-50: color-mix(in srgb, var(--text) 50%, transparent);
  --text-35: color-mix(in srgb, var(--text) 35%, transparent);
  --line-20: light-dark(#E7E5EA, color-mix(in srgb, var(--ink-d) 20%, transparent));
  --hairline: var(--line-20);
  /* «옅은 면»만 라이트 8% · 다크 12% 로 갈린다 */
  --wash: light-dark(#F4F4F5, color-mix(in srgb, var(--ink-d) 12%, transparent));

  /* ── Brand ── */
  --primary:      light-dark(var(--pri-l), var(--pri-d));  /* 채운 면 */
  --primary-lit:  light-dark(#8550E4, #B696FF);            /* 그라데이션의 끝 색 */
  --accent:       light-dark(#7040D9, #B79AFF);            /* 글자·아이콘·테두리 */
  --on-primary:   #FFFFFF;
  --grad: linear-gradient(135deg, var(--primary), var(--primary-lit));  /* 채운 브랜드 면에만 */
  --primary-wash: light-dark(
    color-mix(in srgb, var(--pri-l)  8%, transparent),
    color-mix(in srgb, var(--pri-d) 12%, transparent));

  /* ── Semantic — 바탕과의 대비를 재고 올린 값 (라이트 5.02 · 6.57 · 5.02) ── */
  --danger:  light-dark(#B42318, #FF9B91);
  --warning: light-dark(#B45309, #FBBF24);
  --success: light-dark(#15803D, #4ADE80);
  --success-wash: light-dark(
    color-mix(in srgb, #15803D 8%, transparent),
    color-mix(in srgb, #4ADE80 12%, transparent));

  /* ── 등락 — 한국 시장 문법: 오름 빨강 · 내림 파랑. 위험색과 **다른 토큰**이다 ── */
  --rise: light-dark(#D92D20, #FF9B91);
  --fall: light-dark(#2763C4, #8DB9FF);

  /* ── Radius — 면의 넷 + 조작하는 작은 것의 4px + 알약 ── */
  --radius-xs: 0.25rem;
  --radius-sm: 0.6875rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.125rem;   /* 카드 */
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* ── Spacing — 8pt 그리드 ── */
  --space-4:  0.25rem;
  --space-8:  0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;

  --layout-content-max: 72rem;
  --layout-content-x: clamp(var(--space-20), 4vw, var(--space-64));

  /* ── Typography — Pretendard · 열 칸 + 첫 화면 세 칸 · 굵기는 가진 넷 ── */
  --font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system,
          'Apple SD Gothic Neo', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --w-normal: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ── Icon — 네 칸 ── */
  --icon-sm: 0.75rem;
  --icon-md: 1rem;
  --icon-lg: 1.25rem;
  --icon-xl: 1.625rem;

  /* ── Elevation — 세 칸 + 채운 브랜드 면의 발치 ── */
  --shadow-ink: light-dark(#2A1650, #000000);
  --shadow-1: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
  --shadow-2: 0 8px 24px color-mix(in srgb, var(--shadow-ink) 9%, transparent);
  --shadow-3: 0 24px 64px -12px color-mix(in srgb, var(--shadow-ink) 28%, transparent),
              0 2px 8px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
  --shadow-brand: 0 12px 30px color-mix(in srgb, var(--primary) 28%, transparent);

  /* ── Motion — 들어오는 것과 나가는 것은 곡선이 다르다 ── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;
  --curve-enter: cubic-bezier(.25, 1, .5, 1);
  --curve-exit:  cubic-bezier(.4, 0, 1, 1);

  /* ── Focus ── */
  --outline: 2px solid var(--accent);

  /* 스크롤바도 우리가 그린다 — 손잡이는 중성색이다 */
  scrollbar-width: thin;
  scrollbar-color: var(--line-20) transparent;
}

:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark']  { color-scheme: dark; }

::-webkit-scrollbar { width: .5rem; height: .5rem; }
::-webkit-scrollbar-thumb { background: var(--line-20); border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }