@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ==========================================================
   Advanced Urdu-Hindi Theme
   Burnt Orange and Forest Green
   ========================================================== */

:root {
  /* ----------------------------------------------------------
     Typography
     ---------------------------------------------------------- */

  --font-body: "DM Sans", sans-serif;
  --font-heading: "Libre Baskerville", serif;
  --font-navigation: "DM Sans", sans-serif;

  --font-weight-heading: 700;
  --font-weight-navigation: 700;

  --font-size-body: 1.10rem;
  --font-size-site-title: 2.5rem;
  --font-size-site-title-mobile: 1.6rem;
  --font-size-heading-one: 2.25rem;
  --font-size-heading-two: 1.75rem;

  --line-height-body: 1.68;
  --line-height-heading: 1.25;

  /* ----------------------------------------------------------
     Page surfaces
     ---------------------------------------------------------- */

  --color-page-background: #f2dfc5;
  --color-content-background: #fffaf2;

  /* ----------------------------------------------------------
     Text
     ---------------------------------------------------------- */

  --color-text: #302b26;
  --color-heading: #963f1f;

  /* ----------------------------------------------------------
     Links
     ---------------------------------------------------------- */

  --color-link: #24553b;
  --color-link-hover: #b65327;

  /* ----------------------------------------------------------
     Header
     ---------------------------------------------------------- */

  --color-header-background: #234a35;
  --color-header-text: #fffaf2;

  /* ----------------------------------------------------------
     Navigation
     ---------------------------------------------------------- */

  --color-nav-background: #f4d3ae;
  --color-nav-text: #234a35;
  --color-nav-hover-background: #e8b477;
  --color-nav-hover-text: #713018;

  /* ----------------------------------------------------------
     General list items
     ---------------------------------------------------------- */

  --color-list-background: #f8ead7;
  --color-list-hover-background: #efd1aa;
  --color-list-border: #dfbb8e;

  /* ----------------------------------------------------------
     File list items
     ---------------------------------------------------------- */

  --color-file-background: #35684b;
  --color-file-hover-background: #28553d;
  --color-file-border: #204632;

  /* ----------------------------------------------------------
     Accents
     ---------------------------------------------------------- */

  --color-accent: #b65327;
  --color-secondary-accent: #35684b;
  --color-highlight: #f5d79d;
  --color-focus: #d8753e;

  /* ----------------------------------------------------------
     Borders and corners
     ---------------------------------------------------------- */

  --color-border: #dcc8ae;

  --radius-container: 8px;
  --radius-small: 4px;

  /* ----------------------------------------------------------
     Shadows
     ---------------------------------------------------------- */

  --shadow-container:
    0 4px 8px rgb(67 54 39 / 0.14),
    0 1px 3px rgb(0 0 0 / 0.08);

  --shadow-header:
    0 4px 10px rgb(35 74 53 / 0.24);

  /* ----------------------------------------------------------
     Animation
     ---------------------------------------------------------- */

  --transition-speed: 0.3s;
}

/* ==========================================================
   Theme-specific typography enhancements
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.005em;
}

header.persistent-header h1 {
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.01em;
}

header.persistent-header nav a {
  font-weight: var(--font-weight-navigation);
}

/* ==========================================================
   File-list text contrast
   ========================================================== */

.files .list-group-item a {
  color: #ffffff;
  font-weight: 700;
}

.files .list-group-item a:hover,
.files .list-group-item a:focus-visible {
  color: #ffffff;
}

/* Overrides */

li {
  border: 1px solid transparent;
}