@import url('https://fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* ==========================================================
   Intro Urdu-Hindi Theme
   Eggplant and Emerald
   ========================================================== */

:root {
  /* ----------------------------------------------------------
     Typography
     ---------------------------------------------------------- */
  --font-body: "Lato", serif;
  --font-heading: "Caudex", sans-serif;
  --font-navigation: "Lato", 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.65;
  --line-height-heading: 1.2;

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

  --color-page-background: wheat;
  --color-content-background: #fffdfa;
  /* --color-page-background: #f7f3ee; */
  /* --color-content-background: #fffdfa; */

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

  --color-text: #302a31;
  --color-heading: #6d2f79;

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

  --color-link: #0c4f3b;
  --color-link-hover: #6d2f79;

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

  --color-header-background: #51205c;
  --color-header-text: #ffffff;

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

  --color-nav-background: #e3f2eb;
  --color-nav-text: #164f3e;
  --color-nav-hover-background: #b9dfce;
  --color-nav-hover-text: #51205c;

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

  --color-list-background: #edf7f2;
  --color-list-hover-background: #d0eadf;
  --color-list-border: #abd2c0;

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

  --color-file-background: #258363;
  --color-file-hover-background: #176b52;
  --color-file-border: #145b46;

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

  --color-accent: #7c3488;
  --color-secondary-accent: #258363;
  --color-highlight: #f3e5c3;
  --color-focus: #a74eb5;

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

  --color-border: #d9cdd9;

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

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

  --shadow-container:
    0 4px 8px rgb(81 32 92 / 0.16),
    0 1px 3px rgb(0 0 0 / 0.08);

  --shadow-header: 0 4px 10px rgb(81 32 92 / 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.015em;
}

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

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;
}