/* Design Tokens — draftbook.ink */

:root {
  /* Spacing */
  --gap: 12px;
  --gap-sm: 8px;
  --gap-lg: 20px;
  --gap-xl: 32px;
  
  /* Border radius */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  
  /* Typography */
  --font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-1: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-2: Georgia, 'Times New Roman', serif;
  --font-3: 'Source Code Pro', 'Courier New', monospace; 


  --fz-xs: 12px;
  --fz-sm: 13px;
  --fz-md: 16px;
  --fz-lg: 20px;
  --fz-xl: 24px;
  
  --line-height: 1.6;
  --line-height-tight: 1.4;
  
  /* Transitions */
  --transition: 200ms ease;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Light Theme */
.theme-light {
  --bg: #ffffff;
  --bg-secondary: #fafaf8;
  --bg-tertiary: #f0f0ed;
  --text: #1a1a1a;
  --text-muted: #525252;
  --text-subtle: #737373;
  --border: #e5e5e0;
  --accent: #2c2c2c;
  --accent-hover: #404040;
  --danger: #991b1b;
  --danger-hover: #7f1d1d;
  --success: #15803d;
  --overlay: rgba(0, 0, 0, 0.3);
}

/* Dark Theme */
.theme-dark {
  --bg: #0a0a0a;
  --bg-secondary: #141414;
  --bg-tertiary: #1f1f1f;
  --text: #fafafa;
  --text-muted: #a3a3a3;
  --text-subtle: #737373;
  --border: #262626;
  --accent: #f5f5f5;
  --accent-hover: #ffffff;
  --danger: #fca5a5;
  --danger-hover: #f87171;
  --success: #86efac;
  --overlay: rgba(0, 0, 0, 0.5);
}

/* Eye Comfort Mode */
.eye-comfort {
  --bg: #fdfbf7;
  --bg-secondary: #f8f6f1;
  --bg-tertiary: #f0ede5;
  --text: #2a2a2a;
  --text-muted: #525252;
  --text-subtle: #737373;
  --border: #e8e6df;
  
  filter: brightness(0.98);
}

.theme-dark.eye-comfort {
  --bg: #1a1816;
  --bg-secondary: #252321;
  --bg-tertiary: #312e2a;
  --text: #fdfbf7;
  --text-muted: #a3a3a3;
  --text-subtle: #737373;
  --border: #3d3a35;
}

/* Font size customization (applied to body) */
body {
  font-size: var(--fz-md);
}

body[data-font-size="12"] { --fz-md: 12px; }
body[data-font-size="13"] { --fz-md: 13px; }
body[data-font-size="14"] { --fz-md: 14px; }
body[data-font-size="15"] { --fz-md: 15px; }
body[data-font-size="16"] { --fz-md: 16px; }
body[data-font-size="17"] { --fz-md: 17px; }
body[data-font-size="18"] { --fz-md: 18px; }
body[data-font-size="19"] { --fz-md: 19px; }
body[data-font-size="20"] { --fz-md: 20px; }
body[data-font-size="21"] { --fz-md: 21px; }
body[data-font-size="22"] { --fz-md: 22px; }