/**
 * Gothic & Medieval Fonts for Tibia-Inspired Theme
 * Using Google Fonts for easy integration
 */

/* Cinzel - Gothic serif for headings */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');

/* Crimson Text - Elegant serif for body text */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* MedievalSharp - Display font for special elements */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');

/* IM Fell English - Alternative medieval font */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');

/**
 * Font Face Definitions with Fallbacks
 */
body {
  font-family: 'Crimson Text', 'Georgia', 'Times New Roman', serif;
  font-size: var(--font-size-base, 16px);
  line-height: var(--line-height-normal, 1.5);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-text-primary, #d4d0c8);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.heading,
.title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.25);
  color: var(--color-text-bright, #f5f1e8);
  text-shadow: var(--shadow-text, 2px 2px 4px rgba(0, 0, 0, 0.8));
  letter-spacing: 0.02em;
}

h1 {
  font-size: var(--font-size-4xl, 2.25rem);
  margin-bottom: var(--space-lg, 1.5rem);
}

h2 {
  font-size: var(--font-size-3xl, 1.875rem);
  margin-bottom: var(--space-md, 1rem);
}

h3 {
  font-size: var(--font-size-2xl, 1.5rem);
  margin-bottom: var(--space-md, 1rem);
}

h4 {
  font-size: var(--font-size-xl, 1.25rem);
  margin-bottom: var(--space-sm, 0.5rem);
}

h5 {
  font-size: var(--font-size-lg, 1.125rem);
  margin-bottom: var(--space-sm, 0.5rem);
}

h6 {
  font-size: var(--font-size-base, 1rem);
  margin-bottom: var(--space-sm, 0.5rem);
}

/* Display text (for logos, special titles) */
.display-1,
.logo-text,
.special-title {
  font-family: 'MedievalSharp', 'Cinzel', serif;
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: 400;
  text-shadow:
    0 0 10px rgba(255, 234, 167, 0.5),
    2px 2px 8px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.05em;
  color: var(--color-candlelight, #ffeaa7);
}

/* UI elements (buttons, navigation) */
.btn,
.nav-item,
.menu-item,
button {
  font-family: 'Cinzel', sans-serif;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: var(--font-size-sm, 0.875rem);
}

/* Small caps for special text */
.small-caps {
  font-variant: small-caps;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
}

/* Runic/mystical text */
.runic-text,
.mystical {
  font-family: 'IM Fell English', 'Cinzel', serif;
  font-style: italic;
  color: var(--color-purple-mystic, #5f3dc4);
  text-shadow: 0 0 5px rgba(95, 61, 196, 0.5);
}

/* Code/monospace (for game commands, etc.) */
code, pre, .code {
  font-family: 'Courier New', 'Consolas', monospace;
  background-color: var(--color-bg-darkest, #0a0806);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm, 2px);
  font-size: 0.9em;
  color: var(--color-forest, #4a6741);
}

pre {
  padding: var(--space-md, 1rem);
  overflow-x: auto;
  border: 1px solid var(--color-border-medium, #4a3828);
}

/* Links */
a {
  font-family: inherit;
  color: var(--color-text-link, #6ea8a0);
  text-decoration: none;
  transition: color var(--transition-fast, 150ms);
}

a:hover {
  color: var(--color-text-link-hover, #8fc5bd);
  text-shadow: 0 0 8px rgba(110, 168, 160, 0.4);
}

/* Emphasis */
strong, b {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-bright, #f5f1e8);
}

em, i {
  font-style: italic;
  color: var(--color-text-secondary, #a39a8f);
}

/* Quotes */
blockquote {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: var(--font-size-lg, 1.125rem);
  border-left: 3px solid var(--color-bronze, #8b6f47);
  padding-left: var(--space-lg, 1.5rem);
  margin: var(--space-lg, 1.5rem) 0;
  color: var(--color-text-secondary, #a39a8f);
}

/* Lists */
ul, ol {
  font-family: 'Crimson Text', serif;
  padding-left: var(--space-xl, 2rem);
}

li {
  margin-bottom: var(--space-xs, 0.25rem);
}

/* Tables */
table {
  font-family: 'Crimson Text', serif;
  font-size: var(--font-size-sm, 0.875rem);
}

th {
  font-family: 'Cinzel', serif;
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-xs, 0.75rem);
}

/* Form labels */
label {
  font-family: 'Cinzel', serif;
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary, #a39a8f);
}

/* Input fields */
input, textarea, select {
  font-family: 'Crimson Text', serif;
  font-size: var(--font-size-base, 1rem);
}

/* Placeholder text */
::placeholder {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  color: var(--color-text-muted, #6f6960);
  opacity: 0.7;
}

/* Selection */
::selection {
  background-color: var(--color-bronze, #8b6f47);
  color: var(--color-text-bright, #f5f1e8);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-bronze, #8b6f47);
  color: var(--color-text-bright, #f5f1e8);
  text-shadow: none;
}

/* Responsive Typography */
@media (max-width: 768px) {
  :root {
    --font-size-4xl: 1.875rem;  /* 30px */
    --font-size-3xl: 1.5rem;    /* 24px */
    --font-size-2xl: 1.25rem;   /* 20px */
  }

  body {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-4xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.125rem;  /* 18px */
  }

  body {
    font-size: 14px;
  }
}

/* Print Styles */
@media print {
  body {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #000000;
    font-size: 12pt;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
    color: #000000;
    text-shadow: none;
  }
}