@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ── Typography ── */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.938rem;
  --text-md: 1.05rem;
  --text-lg: 1.175rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.65rem;
  --text-3xl: 2.1rem;
  --text-4xl: 2.8rem;

  /* ── Core Palette ── */
  --ink: #1a1a2e;
  --ink-light: #2d2d44;
  --ink-muted: #4a4a6a;
  --ink-faded: #7a7a9a;

  --paper: #f8f7f4;
  --paper-warm: #f3f1ec;
  --paper-cool: #eef0f4;
  --paper-dark: #e8e6e1;

  --surface: #ffffff;
  --surface-warm: #fdfcfa;
  --surface-raised: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.95);

  /* ── Accent Colors ── */
  --indigo: #4f46e5;
  --indigo-light: #6366f1;
  --indigo-pale: #eef2ff;
  --indigo-deep: #3730a3;

  --amber: #d97706;
  --amber-light: #f59e0b;
  --amber-pale: #fef3c7;
  --amber-deep: #92400e;

  --emerald: #059669;
  --emerald-light: #10b981;
  --emerald-pale: #ecfdf5;
  --emerald-deep: #065f46;

  --slate: #64748b;
  --slate-light: #94a3b8;
  --slate-pale: #f1f5f9;
  --slate-deep: #334155;

  --rose: #e11d48;
  --rose-light: #fb7185;
  --rose-pale: #fff1f2;

  --cyan: #0891b2;
  --cyan-light: #22d3ee;

  /* ── Column Accent Colors ── */
  --col-new: var(--indigo);
  --col-new-bg: var(--indigo-pale);
  --col-progress: var(--amber);
  --col-progress-bg: var(--amber-pale);
  --col-done: var(--emerald);
  --col-done-bg: var(--emerald-pale);
  --col-archive: var(--slate);
  --col-archive-bg: var(--slate-pale);

  /* ── Spacing ── */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ── Border Radius ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.06), 0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(26, 26, 46, 0.06), 0 2px 4px -2px rgba(26, 26, 46, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(26, 26, 46, 0.07), 0 4px 6px -4px rgba(26, 26, 46, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(26, 26, 46, 0.08), 0 8px 10px -6px rgba(26, 26, 46, 0.04);
  --shadow-card: 0 1px 2px rgba(26, 26, 46, 0.04), 0 0 0 1px rgba(26, 26, 46, 0.03);
  --shadow-card-hover: 0 4px 12px -2px rgba(26, 26, 46, 0.1), 0 0 0 1px rgba(26, 26, 46, 0.04);
  --shadow-card-drag: 0 16px 40px -8px rgba(26, 26, 46, 0.18), 0 0 0 1px rgba(79, 70, 229, 0.1);
  --shadow-glow-indigo: 0 0 0 3px rgba(79, 70, 229, 0.12);
  --shadow-modal: 0 25px 50px -12px rgba(26, 26, 46, 0.25);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  /* ── Layout ── */
  --topbar-height: 56px;
  --sidebar-width: 260px;
  --archive-width: 240px;
  --column-min-width: 280px;
  --column-gap: 12px;

  /* ── Focus ── */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--indigo-light);

  /* ── Z-Index Scale ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1500;
}