p {
  max-width: 75ch;
  text-align: justify;
  line-height: 1.8rem;
  letter-spacing: .05rem;
  margin: 1rem 0;
}

body {
  background: url('/svg/bg.svg') var(--background-color) repeat fixed;
  background-size: 15rem;
  color: var(--font-color);
}

:root {
  /* Brand Palette */
  --color-brand-clay: #8a5a44;
  --color-brand-orange: #ba5e26;
  --color-brand-dark-clay: #4a3b32;

  /* Semantic Variables - Light Mode (Default) */
  --color-bg-main: #f9f9f9;
  /* Was hardcoded in About/Home */
  --color-bg-surface: #ffffff;
  /* Card backgrounds */
  --color-bg-soft: #f8f5f2;
  /* Secondary sections */
  --color-bg-tint: #db9d7022;
  /* Tinted sections */

  --color-text-heading: #8a5a44;
  /* Matches clay */
  --color-text-body: #374151;
  /* Gray 700 */
  --color-text-muted: #4b5563;
  /* Gray 600 */
  --color-text-inverse: #fdfbf7;

  --color-border: #db9d704d;

  /* Legacy/Base variables adapted */
  --color-primary: var(--color-bg-main);
  --color-secondary: #3c475a;
  --background-color: var(--color-bg-main);
  --font-color: var(--color-text-body);
  --color-shadow: hsla(0, 0%, 0%, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Semantic Variables - Dark Mode */
    --color-bg-main: #3c475a;
    /* Very dark brown/black */
    --color-bg-surface: #2c2522;
    /* Dark clay surface */
    --color-bg-soft: #241e1b;
    /* Slightly lighter than main */
    --color-bg-tint: #3a2e2840;
    /* Subtle tint */

    --color-text-heading: #e6c8b3;
    /* Light clay/beige for contrast */
    --color-text-body: #d1d5db;
    /* Gray 300 */
    --color-text-muted: #9ca3af;
    /* Gray 400 */
    --color-text-inverse: #1a1614;

    --color-border: #8a5a4440;
    --color-shadow: hsla(0, 0%, 0%, 0.25);

    --color-brand-clay: #d6a485;
    /* Lighter clay for dark mode visibility */
  }
}