/* --- base.css --- */

@layer base, prose, components, themes;

@layer base {
  :root {
    --my-bg: rgb(50 50 51);
    --my-bg-page: rgb(74 74 77);
    --my-accent1: lightseagreen;
    --my-accent2: steelblue;
    --my-text-body: rgb(215 215 216);
    --my-text-note: #999;
    --my-h1: var(--my-text-body);
    --my-h2: var(--my-text-body);
    --my-h3: var(--my-text-body);
    --my-h4: var(--my-text-body);
    --my-h5: var(--my-text-body);
    --my-h6: var(--my-text-body);
    --my-h1-size: 2em;
    --my-h2-size: 1.5em;
    --my-h3-size: 1.17em;
    --my-h4-size: 1em;
    --my-h5-size: 1em;
    --my-h6-size: 1em;
    --my-p-letter-spacing: normal;
    --my-h1-font-family: inherit;
    --my-h1-font-weight: 700;
    --my-h1-letter-spacing: normal;
    --my-h1-font-variant-caps: normal;
    --my-h2-font-family: inherit;
    --my-h2-font-weight: 600;
    --my-h2-letter-spacing: normal;
    --my-h3-font-family: inherit;
    --my-h3-font-weight: 700;
    --my-h3-letter-spacing: normal;
    --my-h4-font-family: inherit;
    --my-h4-font-weight: 700;
    --my-h4-letter-spacing: normal;
    --my-h5-font-family: inherit;
    --my-h5-font-weight: 700;
    --my-h5-letter-spacing: normal;
    --my-h6-font-family: inherit;
    --my-h6-font-weight: 700;
    --my-h6-letter-spacing: normal;
    --my-bible-verse-font-family: inherit;
    --my-bible-verse-font-style: normal;
    --my-bible-verse-text-align: inherit;

    --my-font-default:
      system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen,
      ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --ui-font:
      system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen,
      ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    --my-rule-color: rgb(255 255 255 / 15%);
    --my-verse-bg: rgb(0 0 0 / 10%);
    --my-h3-rule: gray;

    --ui-dur-fast: 0.2s;
    --ui-dur-medium: 0.33s;
    --ui-radius-sm: 0.3rem;
    --ui-radius-md: 0.5rem;
    --ui-radius-pill: 999px;

    --toolbar-bg: #2a2a2a;
    --toolbar-border: rgb(255 255 255 / 10%);
    --toolbar-shadow: 0 10px 24px rgb(0 0 0 / 24%);
    --toolbar-fg: #ccc;
    --toolbar-hover-fg: var(--my-accent1);
    --toolbar-hover-bg: rgb(255 255 255 / 4%);
    --toolbar-active-bg: rgb(255 255 255 / 8%);

    --ui-hover-overlay: rgb(255 255 255 / 4%);
    --ui-active-overlay: rgb(255 255 255 / 8%);

    --reader-text-color: var(--my-text-body);
  }

  html {
    background-color: var(--my-bg);
    color: var(--my-text-body);
    min-height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    width: 100%;
  }

  body {
    background-color: var(--my-bg);
    color: var(--my-text-body);
    font-family: var(--my-font-default);
    font-size: 1.1em;
    margin: 0;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
  }

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

  footer {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.125rem;
    transition-duration: var(--ui-dur-fast);
  }

  #page {
    background-color: var(--my-bg-page);
    margin: 2rem auto 0;
    max-width: 70ch;
    padding: 2rem;
  }

  @media (width <= 768px) {
    #page {
      margin: 0;
      max-width: none;
      padding: 1rem;
    }
  }
}