/* ==========================================================================
   Joan of Arc: Orléans Draw & Write — Theme
   Medieval parchment aesthetic with illuminated manuscript accents
   ========================================================================== */

:root {
  /* Primary palette */
  --colour-parchment: #F5E6C8;
  --colour-parchment-dark: #E8D5A8;
  --colour-ink: #2C1810;
  --colour-ink-light: #5C4033;
  --colour-gold: #C8A43C;
  --colour-gold-dark: #8B7028;
  --colour-royal-blue: #1E3A5F;
  --colour-royal-blue-light: #2E5A8F;
  --colour-red: #8B1A1A;
  --colour-green: #2D5A1E;
  --colour-cream: #FFF8E7;
  --colour-brown: #6B4226;
  --colour-brown-light: #8B6B4A;

  /* Follower type colours */
  --colour-farmer: #D4A44C;
  --colour-boatman: #4A8BC2;
  --colour-knight: #B83A2A;
  --colour-craftsman: #2A2A2A;
  --colour-scholar: #7A7A7A;
  --colour-trader: #5A6B3A;
  --colour-monk: #6B4A8A;

  /* Category colours */
  --colour-cat-i: #C8A43C;
  --colour-cat-ii: #8B6B4A;
  --colour-cat-iii: #5C4033;
  --colour-cat-iv: #3A5A6B;
  --colour-cat-v: #4A2A5A;

  /* Functional */
  --colour-success: #2D5A1E;
  --colour-warning: #C8A43C;
  --colour-danger: #8B1A1A;
  --colour-info: #1E3A5F;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.12);
  --shadow-md: 0 2px 8px rgba(44, 24, 16, 0.16);
  --shadow-lg: 0 4px 16px rgba(44, 24, 16, 0.2);
  --shadow-card: 0 2px 6px rgba(44, 24, 16, 0.15);

  /* Typography */
  --font-primary: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-mono: 'Courier New', Courier, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;

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

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-round: 50%;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-index layers */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ==========================================================================
   Base reset & typography
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--colour-ink);
  background-color: var(--colour-parchment);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  /* Parchment texture via CSS gradient */
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(232, 213, 168, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(200, 164, 60, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(107, 66, 38, 0.06) 0%, transparent 50%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  color: var(--colour-ink);
}

h1 {
  font-size: var(--font-size-3xl);
  letter-spacing: 0.02em;
}

h2 {
  font-size: var(--font-size-2xl);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--colour-royal-blue);
  text-decoration: none;
}

a:hover {
  color: var(--colour-royal-blue-light);
  text-decoration: underline;
}

/* Tabular numerals for scores */
.num {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* Small caps for section titles */
.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

/* Selection colour */
::selection {
  background-color: var(--colour-gold);
  color: var(--colour-ink);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--colour-parchment-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--colour-brown-light);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--colour-brown);
}