/* Blake-Inspired Poetry Site - Foundation Styles
   Warm, earthy illuminated manuscript aesthetic
*/

/* === CSS RESET === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === COLOR PALETTE === */
:root {
  /* Backgrounds - warm parchment tones */
  --bg-primary: #f5efe6;
  --bg-card: #faf6ef;
  --bg-hover: #ebe4d8;

  /* Parchment variations */
  --parchment-light: #f8f3ea;
  --parchment-medium: #e8dfd0;
  --parchment-aged: #d4c9b5;

  /* Text - warm ink tones */
  --text-primary: #2a2520;
  --text-secondary: #4a433a;
  --text-muted: #7a6f60;

  /* Accent - copper and gold */
  --accent: #b87333;
  --accent-hover: #8b5a2b;
  --accent-gold: #c9a962;
  --accent-copper: #b87333;
  --accent-copper-dark: #8b5a2b;

  /* Light tones for borders/etching */
  --light-cream: #f5f0e6;
  --light-gold: #c9a962;
  --light-copper: #cd8c52;

  /* Shadows */
  --shadow-deep: rgba(42, 37, 32, 0.4);
  --shadow-soft: rgba(42, 37, 32, 0.15);
  --highlight-soft: rgba(250, 248, 244, 0.3);
  --highlight-bright: rgba(250, 248, 244, 0.5);

  /* Ground */
  --ground-warm-black: #1a1612;

  /* Borders */
  --border: #d4c9b5;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-title: 'Cinzel Decorative', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-medium: 0.3s ease;

  /* Animation timing */
  --breathe-duration: 4s;
  --flicker-duration: 3s;
}

/* === BASE ELEMENTS === */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;

  /* Subtle parchment texture via CSS gradient */
  background-image:
    /* Warm gradient overlay */
    linear-gradient(
      135deg,
      var(--parchment-light) 0%,
      var(--bg-primary) 50%,
      var(--parchment-medium) 100%
    );
  background-attachment: fixed;
}

/* === TYPOGRAPHY === */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

p {
  margin-bottom: 1em;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === UTILITY === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::selection {
  background-color: var(--accent-gold);
  color: var(--text-primary);
}