/* --- skin-antique.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: #efe5d2;
    --my-bg-page: #f9f2e3;
    --my-accent1: #9e8f71;
    --my-accent2: #778b86;

    --my-text-body: #3f3527;
    --my-text-note: #857966;
    --my-h1: var(--my-text-body);
    --my-h2: var(--my-text-body);
    --my-h3: color-mix(in srgb, var(--my-accent1) 52%, var(--my-text-body));
    --my-h4: var(--my-text-body);
    --my-h5: var(--my-text-note);
    --my-h6: var(--my-text-note);

    --my-rule-color: rgb(58 47 34 / 16%);
    --my-verse-bg: rgb(130 110 76 / 8%);
    --my-h3-rule: rgb(133 121 102 / 46%);

    --drawer-border: rgb(63 53 39 / 18%);
    --drawer-backdrop: rgb(0 0 0 / 32%);
    --drawer-bg: #f4eada;
    --drawer-rule-border: rgb(63 53 39 / 13%);
    --drawer-chip-border: rgb(63 53 39 / 18%);
    --drawer-chip-hover-bg: rgb(63 53 39 / 4%);
    --drawer-field-bg: #ece0cb;
    --drawer-field-border: rgb(63 53 39 / 18%);
    --drawer-slider-track: rgb(63 53 39 / 24%);
    --drawer-button-border: rgb(63 53 39 / 22%);

    --toolbar-bg: #7a735f;
    --toolbar-border: rgb(255 255 255 / 20%);
    --toolbar-shadow: 0 10px 24px rgb(0 0 0 / 22%);
    --toolbar-fg: #faf6ef;
    --toolbar-hover-fg: #f4ead9;
    --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) 72%, #4b5f57);
  }

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