/* =============================================
   THEME & VARIABLES
   Edit colors, fonts, and spacing here.
   ============================================= */

:root {
  /* Fonts — change these to swap typefaces */
  --font-display: 'Lora', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Animation easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.4s var(--ease-out-expo);
}

/* ---- Light Mode ---- */
[data-theme="light"] {
  --bg-primary: #F8F7F4;
  --bg-secondary: #EFEDE8;
  --bg-card: #FFFFFF;
  --text-primary: #1B1918;
  --text-secondary: #5C5752;
  --text-muted: #9E9890;
  --accent: #B84A2D;
  --accent-soft: rgba(184, 74, 45, 0.06);
  --accent-hover: #9B3B20;
  --border: rgba(27, 25, 24, 0.06);
  --border-strong: rgba(27, 25, 24, 0.12);
  --shadow-md: 0 4px 24px rgba(27, 25, 24, 0.05);
  --shadow-sm: 0 1px 4px rgba(27, 25, 24, 0.03);
  --noise-opacity: 0.22;
  --tag-bg: rgba(184, 74, 45, 0.06);
  --tag-text: #B84A2D;
  --highlight: rgba(184, 74, 45, 0.08);
  --img-placeholder: #ECEAE5;
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  --bg-primary: #101010;
  --bg-secondary: #1A1918;
  --bg-card: #1E1D1C;
  --text-primary: #ECE9E4;
  --text-secondary: #B8B3AB;
  --text-muted: #8A847D;
  --accent: #DF7B58;
  --accent-soft: rgba(223, 123, 88, 0.07);
  --accent-hover: #EE9574;
  --border: rgba(236, 233, 228, 0.07);
  --border-strong: rgba(236, 233, 228, 0.14);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2);
  --noise-opacity: 0.1;
  --tag-bg: rgba(223, 123, 88, 0.08);
  --tag-text: #DF7B58;
  --highlight: rgba(223, 123, 88, 0.1);
  --img-placeholder: #252423;
}