/* ============================================================
   BOOKLY — DESIGN SYSTEM VARIABLES
   Light theme is default (:root). Dark theme activates via
   [data-theme="dark"] on <html>, set/remembered by app.js.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Light theme */
  --bg: #F7F7F5;
  --card: #FFFFFF;
  --text: #1F2937;
  --text-secondary: #6B7280;
  --border: #E5E7EB;
  --primary: #0F766E;
  --primary-light: #CCFBF1;
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;

  /* Typography */
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shared tokens (same across themes) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 20, 0.05);
  --shadow-md: 0 8px 24px rgba(17, 24, 20, 0.08);
  --sidebar-bg: var(--card);
}

[data-theme="dark"] {
  --bg: #111412;
  --sidebar-bg: #171B18;
  --card: #1D221F;
  --card-elevated: #242A26;
  --text: #F1F5F2;
  --text-secondary: #9CA8A0;
  --border: #303832;
  --primary: #5EE6B0;
  --primary-dark: #164E3B;
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger: #F87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
}