/* ==========================================================================
   JOTHOR (جذور) - Official Brand Design System & Core Tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Color Palette: Heritage Forest */
  --c-forest-950: #08120C;
  --c-forest-900: #0E1F16;
  --c-forest-850: #142B1F;
  --c-forest-800: #1B3828;
  --c-forest-700: #254D37;
  --c-forest-600: #336549;
  --c-forest-100: #E2ECE5;
  --c-forest-50:  #F0F6F2;

  /* Color Palette: Warm Parchment & Ivory */
  --c-parchment-50:  #FCFAF7;
  --c-parchment-100: #FAF6F0;
  --c-parchment-200: #F3ECE1;
  --c-parchment-300: #EAE0D1;
  --c-parchment-400: #DDD0BF;

  /* Color Palette: Deep Charcoal & Ink */
  --c-ink-950: #121413;
  --c-ink-900: #1A1D1B;
  --c-ink-800: #2C302D;
  --c-ink-700: #3E4540;
  --c-ink-600: #545C56;
  --c-ink-500: #6D7770;
  --c-ink-400: #8B958E;

  /* Color Palette: Burnished Gold & Bronze */
  --c-gold-700: #8C6527;
  --c-gold-600: #A9803C;
  --c-gold-500: #C59B53;
  --c-gold-400: #D9B372;
  --c-gold-200: #EEDBB7;
  --c-gold-100: #F8F2E6;
  --c-gold-50:  #FDFBF7;

  /* Borders & Dividers */
  --c-border:        #E2D8C8;
  --c-border-subtle: #ECE4D7;
  --c-border-strong: #C8BDAA;

  /* Theme semantic mappings */
  --bg-page:        var(--c-parchment-100);
  --bg-surface:     #FFFFFF;
  --bg-surface-alt: var(--c-parchment-200);
  --text-primary:   var(--c-ink-900);
  --text-secondary: var(--c-ink-600);
  --text-muted:     var(--c-ink-500);
  --text-brand:     var(--c-forest-800);
  --text-accent:    var(--c-gold-600);
  --link-color:     var(--c-forest-800);
  --link-hover:     var(--c-forest-600);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(23, 26, 24, 0.05), 0 1px 2px rgba(23, 26, 24, 0.03);
  --shadow-md: 0 4px 12px rgba(23, 26, 24, 0.06), 0 2px 4px rgba(23, 26, 24, 0.04);
  --shadow-lg: 0 12px 30px rgba(23, 26, 24, 0.08), 0 4px 10px rgba(23, 26, 24, 0.05);
  --shadow-card: 0 8px 24px -4px rgba(20, 43, 31, 0.06), 0 2px 6px -2px rgba(20, 43, 31, 0.04);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Layout */
  --container-max: 1200px;
  --container-legal: 860px;
  --header-height: 80px;

  /* Typography Stacks (Default English) */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic-heading: 'Amiri', 'Playfair Display', serif;
  --font-arabic-body: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* RTL Typography Overrides for Arabic */
[dir="rtl"] {
  --font-serif: var(--font-arabic-heading);
  --font-sans: var(--font-arabic-body);
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.65;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: var(--bg-page);
}

/* Focus styles for keyboard accessibility */
:focus-visible {
  outline: 2px solid var(--c-gold-500);
  outline-offset: 3px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-brand);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  line-height: 1.45;
  letter-spacing: normal;
}

p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.75;
}

[dir="rtl"] p {
  line-height: 1.9;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

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

img, svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Containers */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-legal);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Subtle Archival Texture Effect (Pure CSS) */
.archival-bg {
  background-color: var(--bg-page);
  background-image: radial-gradient(var(--c-border-subtle) 0.75px, transparent 0.75px);
  background-size: 24px 24px;
}

/* Skip to Content for Accessibility */
.skip-link {
  position: absolute;
  top: -999px;
  left: 1rem;
  background: var(--c-forest-800);
  color: #fff;
  padding: 0.75rem 1.5rem;
  z-index: 9999;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}