/* =====================================================================
   DragDocs — Design Tokens (메인 v0.6)
   Figma variables에서 추출 (node 2875:26513 / 메인 v0.6)
   ===================================================================== */
:root {
  /* ---- Accent ---- */
  --accent-blue: #006eff;        /* 유일한 인터랙티브 액센트 — 링크·탭·아이콘·강조 */
  --accent-blue-deep: #1410d4;   /* 짙은 파랑 면(피처 카드 배경 등) */
  --accent-purple: #a000ff;      /* 보조 액센트 — 아이브로우·바 등 소량만 */
  --accent-sky: #4ec4ff;
  --accent-mint: #34d399;
  --accent-teal: #0e9488;
  --danger: #eb5252;

  /* ---- Product accents (도구 상세 페이지 · data.js/main.js 가 var() 이름으로 주입) ---- */
  --product-viewer: var(--accent-blue);
  --product-filter: var(--accent-blue);
  --product-editor: #7c3aed;
  --product-office: #d9660a;
  --product-convertor: #d11f3d;

  /* ---- Text ---- */
  --ink: #0d1220;           /* 헤딩/강조 — 시원한 near-black */
  --text: #1c1e26;          /* 본문 기본 */
  --text-paragraph: #5a606e; /* 보조 문단 — cooler slate */
  --text-slate: #64748b;
  --text-on-dark: #ffffff;

  /* ---- Surfaces ---- */
  --bg-blue: #ebf7fa;
  --bg-bluegrey: #f4f6f6;
  --surface-1: #f4f5f8;     /* viewer/bg1 */
  --surface-2: #e9edf1;     /* viewer/bg2 */
  --surface-3: #c8d1da;     /* viewer/bg3 */
  --surface-selected: #d3deeb;
  --surface-dark: #101625;  /* 다크 섹션(보안 벤토 · CTA) 공통 바탕 */
  --white: #ffffff;

  /* ---- Greys ---- */
  --grey-98: #f8fafc;
  --grey-97: #eff6ff;
  --grey-96: #f3f4f6;
  --grey-91: #e2e8f0;       /* borders */
  --catskill: #f1f5f9;

  /* ---- Borders (hairline) ---- */
  --border: #e8ebf1;        /* 기본 카드 테두리 */
  --border-soft: #f0f2f6;   /* 한층 옅은 구분선 */

  /* ---- FAB ---- */
  --fab-dark: #292929;
  --fab-sky: #4ec4ff;
  --fab-glass: rgba(255, 255, 255, 0.9);

  /* ---- Theme backgrounds (per product slide) ---- */
  --hero-blue-from: #0a2a6b;
  --hero-blue-to: #1769e0;
  --hero-mint-from: #b8efe3;
  --hero-mint-to: #d9f7ee;
  --hero-pink-from: #e7d9ff;
  --hero-pink-to: #f3ecff;
  --hero-coral-from: #ffcabf;
  --hero-coral-to: #fff0ec;

  /* ---- Typography ---- */
  --font-sans: "Pretendard Variable", "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-brand: var(--font-sans);
  --font-display: "Noto Serif KR", "Nanum Myeongjo", "Apple Myungjo", "Batang", serif; /* 헤딩 전용 */
  --font-mono: "Menlo", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Type scale (px → rem at 16px base) */
  --fs-display: 60px; /* H1 / display */
  --fs-h1: 48px;
  --fs-h2: 36px;      /* H3 token */
  --fs-h3: 26px;
  --fs-t1: 32px;
  --fs-t2: 22px;
  --fs-p1: 20px;
  --fs-p2: 16px;
  --fs-p3: 14px;
  --fs-caption: 12px;

  /* ---- Spacing scale ---- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-80: 80px;

  /* ---- Radius / Elevation ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-card: 24px;      /* 대형 콘텐츠 카드 통일 라운딩 */
  --radius-pill: 999px;
  /* 부드럽고 겹친 그림자 — premium feel */
  --shadow-soft: 0 1px 2px rgba(13, 18, 32, 0.04), 0 6px 16px rgba(13, 18, 32, 0.05);
  --shadow-card: 0 1px 3px rgba(13, 18, 32, 0.05), 0 14px 40px -10px rgba(13, 18, 32, 0.1);
  --shadow-lift: 0 2px 8px rgba(13, 18, 32, 0.06), 0 28px 60px -16px rgba(13, 18, 32, 0.16);
  --shadow-fab: 0 10px 28px rgba(13, 18, 32, 0.2);

  /* ---- Layout ---- */
  --container: 1280px;
  --header-h: 64px;
  --z-header: 100;
  --z-fab: 120;
  --z-modal: 1000;
}