/* --- skin-terminal.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: #06110a;
    --my-bg-page: #0b1810;
    --my-accent1: #58d57f;
    --my-accent2: #8ce5a6;

    --my-text-body: #b9f2c7;
    --my-text-note: #78af87;
    --my-h1: var(--my-text-body);
    --my-h2: #9af9b6;
    --my-h3: color-mix(in srgb, var(--my-accent1) 66%, 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.01em;

    --my-font-default: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New",
      monospace;

    --my-rule-color: rgb(185 242 199 / 18%);
    --my-verse-bg: rgb(88 213 127 / 8%);
    --my-h3-rule: rgb(120 175 135 / 44%);

    --drawer-border: rgb(185 242 199 / 22%);
    --drawer-backdrop: rgb(0 0 0 / 60%);
    --drawer-bg: #08140d;
    --drawer-rule-border: rgb(185 242 199 / 16%);
    --drawer-chip-border: rgb(185 242 199 / 24%);
    --drawer-chip-hover-bg: rgb(88 213 127 / 14%);
    --drawer-field-bg: #051009;
    --drawer-field-border: rgb(185 242 199 / 22%);
    --drawer-slider-track: rgb(185 242 199 / 30%);
    --drawer-button-border: rgb(185 242 199 / 26%);

    --toolbar-bg: #07130c;
    --toolbar-border: rgb(185 242 199 / 18%);
    --toolbar-shadow: 0 12px 28px rgb(0 0 0 / 48%);
    --toolbar-fg: #b9f2c7;
    --toolbar-hover-fg: #d4ffe0;
    --toolbar-hover-bg: rgb(88 213 127 / 18%);
    --toolbar-active-bg: rgb(88 213 127 / 24%);

    --ui-hover-overlay: rgb(88 213 127 / 16%);
    --ui-active-overlay: rgb(88 213 127 / 24%);
  }

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

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

  #content-area h2 {
    color: var(--my-h2);
    text-shadow:
      0 0 0.12rem rgb(154 249 182 / 60%),
      0 0 0.4rem rgb(88 213 127 / 28%);
  }

  #content-area .bible-verse {
    background-color: rgb(88 213 127 / 8%);
    border-left: 0.2rem solid rgb(88 213 127 / 56%);
  }
}