@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

:root {
  /* HSL Colors for easy manipulation */
  /* Dark Red / Brownish Tone */
  --hue-primary: 0;
  --hue-success: 150;
  --hue-error: 10;
  --hue-text: 30;
  /* Warmer text */

  --color-bg: hsl(30, 20%, 97%);
  /* Warm paper-like bg */
  --color-surface: hsl(0, 0%, 100%);

  /* Neutral / Black Accent */
  --color-primary: hsl(0, 0%, 20%);
  --color-primary-dark: hsl(0, 0%, 0%);

  --color-text-main: hsl(var(--hue-text), 10%, 20%);
  --color-text-muted: hsl(var(--hue-text), 5%, 60%);

  --color-success: hsl(var(--hue-success), 60%, 45%);
  --color-error: hsl(var(--hue-error), 70%, 55%);
  --color-warning: hsl(35, 90%, 50%);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-serif: 'Playfair Display', serif;

  --font-size-base: 16px;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.02);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: hsl(30, 20%, 10%);
    --color-surface: hsl(30, 20%, 15%);
    --color-text-main: hsl(30, 10%, 90%);
    --color-text-muted: hsl(30, 10%, 60%);
    /* In dark mode, 'primary' (black) matches background too much, so we invert or use white */
    --color-primary: hsl(0, 0%, 90%);
    --color-primary-dark: hsl(0, 0%, 100%);
  }
}

body {
  margin: 0;
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.5;
}

#root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}