/* =====================================================================
   DragDocs — Design Tokens (메인 v0.6)
   Figma variables에서 추출 (node 2875:26513 / 메인 v0.6)
   ===================================================================== */
:root {
  /* ---- Brand / Gradient ---- */
  --grad-purple: #a010ff;
  --grad-blue: #006eff;
  --grad-cyan: #03fff8;
  --grad-cta: linear-gradient(90deg, var(--grad-purple), var(--grad-blue), var(--grad-cyan));

  /* ---- Accent ---- */
  --accent-blue: #006eff;
  --accent-blue-deep: #0500ff;
  --accent-sky: #4ec4ff;
  --accent-mint: #34d399;
  --danger: #eb5252;

  /* ---- 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;
  --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-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;
}