/* ============================================================
   dashboard.css — BlackRabbit LAB · STOCKER
   Design Reference: Supabase / Vercel / Linear
   Theme: True Obsidian + Emerald Accent
   Version: 5.0.0 — Layout System Overhaul (Mobile-First)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════
   CSS 디자인 토큰 — Supabase 컬러 시스템
══════════════════════════════════════════════ */
:root {
  /* ── 배경 레이어 (near-black) ── */
  --bg:        #0f0f0f;
  --bg2:       #141414;
  --surface:   #1a1a1a;
  --surface2:  #222222;
  --surface3:  #2a2a2a;
  --surface4:  #303030;

  /* ── 테두리 ── */
  --border:    #2a2a2a;
  --border2:   #333333;
  --border3:   #404040;

  /* ── 텍스트 계층 ── */
  --text:      #ededed;
  --text1:     #ededed;
  --text2:     #a0a0a0;
  --text3:     #666666;
  --text4:     #444444;
  --text-muted:#888888;

  /* ── 시그니처 액센트 ── */
  --accent:        #3ecf8e;
  --accent2:       #5ad8a0;
  --accent3:       #2ab87a;
  --accent-dim:    rgba(62, 207, 142, 0.06);
  --accent-dim2:   rgba(62, 207, 142, 0.12);
  --accent-glow:   rgba(62, 207, 142, 0.25);
  --accent-glow2:  rgba(62, 207, 142, 0.45);

  /* ── 상태 컬러 ── */
  --green:     #3ecf8e;
  --green-bg:  rgba(62, 207, 142, 0.08);
  --red:       #f56565;
  --red-bg:    rgba(245, 101, 101, 0.08);
  --yellow:    #f6c90e;
  --yellow-bg: rgba(246, 201, 14, 0.08);
  --blue:      #63b3ed;
  --blue-bg:   rgba(99, 179, 237, 0.08);
  --purple:    #b794f4;
  --orange:    #f6a623;

  /* ── 폰트 ── */
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-body:    'Noto Sans KR', 'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Noto Sans KR', sans-serif;

  /* ── 레이아웃 ── */
  --sidebar-w:     220px;
  --topbar-h:      56px;
  --bottom-nav-h:  60px;

  /* ── 반지름 ── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;

  /* ── 그림자 ── */
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 0 0 1px rgba(62, 207, 142, 0.15), 0 4px 20px rgba(0, 0, 0, 0.6);

  /* ── 전환 ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.18s;

  /* ── Z-Index ── */
  --z-sidebar: 90;
  --z-topbar:  100;
  --z-overlay: 150;
  --z-modal:   200;
  --z-tooltip: 300;
}