/* 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[data-skin="light"] {
    --my-bg: rgb(213 224 244);
    --my-bg-page: rgb(252 254 255);
    --my-accent1: #1f8f95;
    --my-accent2: #2f6ed8;
    --my-text-body: rgb(7 15 29);
    --my-text-note: #4f5969;
    --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-p-letter-spacing: normal;

    --my-rule-color: rgb(0 0 0 / 14%);
    --my-verse-bg: rgb(0 0 0 / 10%);
    --my-h3-rule: #8793ab;

    --my-font-default: system-ui, -apple-system, serif;

    --drawer-border: rgb(0 0 0 / 20%);
    --drawer-backdrop: rgb(0 0 0 / 32%);
    --drawer-bg: rgb(245 248 252);
    --drawer-rule-border: rgb(0 0 0 / 15%);
    --drawer-chip-border: rgb(0 0 0 / 20%);
    --drawer-chip-hover-bg: rgb(0 0 0 / 4%);
    --drawer-field-bg: rgb(236 241 248);
    --drawer-field-border: rgb(0 0 0 / 20%);
    --drawer-slider-track: rgb(80 80 80 / 26%);
    --drawer-button-border: rgb(0 0 0 / 24%);

    --toolbar-bg: #3f4b63;
    --toolbar-border: rgb(255 255 255 / 20%);
    --toolbar-shadow: 0 10px 24px rgb(0 0 0 / 22%);
    --toolbar-fg: #f6f8fc;
    --toolbar-hover-fg: #8de1df;
    --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 / 18%);
  }
}