/* --- skin-paper.css --- */
/* Theme Token Override Order:
1) Surface + accent
2) Text + heading colors
3) Heading/paragraph typography
4) Prose chrome + verse typography
5) Drawer
6) Toolbar
*/

@layer themes {
  :root {
    --my-bg: #e6e4dd;
    --my-bg-page: #f2f1eb;
    --my-accent1: #646a66;
    --my-accent2: #4f5558;

    --my-text-body: #2f3130;
    --my-text-note: #666b68;
    --my-h1: var(--my-text-body);
    --my-h2: var(--my-text-body);
    --my-h3: color-mix(in srgb, var(--my-accent2) 58%, var(--my-text-body));
    --my-h4: var(--my-text-body);
    --my-h5: var(--my-text-note);
    --my-h6: var(--my-text-note);
    --my-p-letter-spacing: 0.004em;
    --my-font-default: "Times New Roman", Times, Georgia, serif;
    --my-h1-font-family: "Times New Roman", Times, Georgia, serif;
    --my-h2-font-family: "Times New Roman", Times, Georgia, serif;
    --my-h1-letter-spacing: 0.03em;
    --my-h2-letter-spacing: 0.02em;

    --my-rule-color: rgb(47 49 48 / 15%);
    --my-verse-bg: rgb(47 49 48 / 5%);
    --my-h3-rule: rgb(102 107 104 / 46%);

    --drawer-border: rgb(47 49 48 / 18%);
    --drawer-backdrop: rgb(0 0 0 / 30%);
    --drawer-bg: #ebe9e2;
    --drawer-rule-border: rgb(47 49 48 / 14%);
    --drawer-chip-border: rgb(47 49 48 / 18%);
    --drawer-chip-hover-bg: rgb(47 49 48 / 4%);
    --drawer-field-bg: #e1dfd8;
    --drawer-field-border: rgb(47 49 48 / 18%);
    --drawer-slider-track: rgb(47 49 48 / 24%);
    --drawer-button-border: rgb(47 49 48 / 22%);

    --toolbar-bg: #5c6261;
    --toolbar-border: rgb(255 255 255 / 18%);
    --toolbar-shadow: 0 10px 24px rgb(0 0 0 / 20%);
    --toolbar-fg: #f0f1ef;
    --toolbar-hover-fg: #dbe0dd;
    --toolbar-hover-bg: rgb(255 255 255 / 12%);
    --toolbar-active-bg: rgb(255 255 255 / 18%);

    --ui-hover-overlay: rgb(255 255 255 / 10%);
    --ui-active-overlay: rgb(255 255 255 / 16%);
  }

  body a {
    color: color-mix(in srgb, var(--my-accent2) 84%, #42494a);
  }

  nav a {
    color: var(--my-text-body);
  }

  @media (width > 768px) {
    #page {
      background-image:
        linear-gradient(
          0deg,
          rgb(255 255 255 / 22%) 0%,
          rgb(0 0 0 / 2%) 100%
        ),
        repeating-linear-gradient(
          90deg,
          rgb(255 255 255 / 6%) 0 2px,
          transparent 2px 18px
        );
    }
  }

  #content-area h1,
  #content-area h2 {
    text-transform: uppercase;
  }

  #content-area h2 {
    border-bottom: 1px solid rgb(47 49 48 / 18%);
    padding-bottom: 0.24rem;
  }

  #content-area .bible-verse {
    background-color: rgb(47 49 48 / 5%);
    border-left: 0.2rem solid rgb(47 49 48 / 22%);
  }
}