:root {
    /* Colors */
    --color-orange: #FC9120;
    --color-red: #FF6B6B;
    --color-black: #212529;
    --color-green: #2A9D90;
    --color-yellow: #F3F76E;
    --color-blue: #1E97B8;
    --color-deepblue: #274754;

    /* Theme */
    --theme--color-accent: var(--color-green);

    /* Fonts */
    --ls-font-family: Cascadia Code;
}

body {
    color: var(--ls-primary-text-color);
}

body i {
    font-style: normal;
    color: var(--color-orange);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-red);
}

h1.title {
    color: var(--color-deepblue);
    text-decoration: underline var(--color-blue) 1px;
}

.light-theme,
.white-theme,
.dark-theme,
html[data-theme=light],
html[data-theme=light][data-color=logseq],
html[data-theme=dark],
html[data-theme=dark][data-color=logseq] {
    /* Bullets */
    --ls-block-bullet-threading-active-color-overwrite: var(--theme--color-accent);
    --ls-guideline-color: var(--ls-tertiary-background-color);

    /* Blocks */
    --ls-block-highlight-color: color-mix(in oklab, var(--theme--color-accent) 25%, var(--ls-primary-background-color));
    --ls-block-properties-background-color: color-mix(in oklab, var(--theme--color-accent) 5%, var(--ls-primary-background-color));

    /* Borders */
    --ls-border-color: var(--theme--color-accent);

    /* Tasks */
    --ls-page-checkbox-color: var(--color-orange);

    /* Links */
    --ls-link-text-hover-color: var(--theme--color-accent);

    /* Scrollbar */
    --ls-scrollbar-foreground-color: var(--ls-tertiary-background-color);
    --ls-scrollbar-background-color: transparent;
    --ls-scrollbar-thumb-hover-color: var(--ls-quaternary-background-color);

    /* Accent */
    --rx-logseq-01: var(--theme--color-accent);
    --rx-logseq-02: color-mix(in oklab, var(--rx-logseq-01) 95%, var(--rx-logseq-12));
    --rx-logseq-03: color-mix(in oklab, var(--rx-logseq-01) 90%, var(--rx-logseq-12));
    --rx-logseq-04: color-mix(in oklab, var(--rx-logseq-01) 85%, var(--rx-logseq-12));
    --rx-logseq-05: color-mix(in oklab, var(--rx-logseq-01) 80%, var(--rx-logseq-12));
    --rx-logseq-06: color-mix(in oklab, var(--rx-logseq-01) 75%, var(--rx-logseq-12));
    --rx-logseq-07: color-mix(in oklab, var(--rx-logseq-01) 70%, var(--rx-logseq-12));
    --rx-logseq-08: color-mix(in oklab, var(--rx-logseq-01) 65%, var(--rx-logseq-12));
    --rx-logseq-09: color-mix(in oklab, var(--rx-logseq-01) 60%, var(--rx-logseq-12));
    --rx-logseq-10: color-mix(in oklab, var(--rx-logseq-01) 55%, var(--rx-logseq-12));
    --rx-logseq-11: color-mix(in oklab, var(--rx-logseq-01) 50%, var(--rx-logseq-12));

    /* Background */
    --ls-secondary-background-color: color-mix(in oklab, var(--ls-primary-background-color) 90%, var(--ls-primary-text-color));
    --ls-tertiary-background-color: color-mix(in oklab, var(--ls-primary-background-color) 80%, var(--ls-primary-text-color));
    --ls-quaternary-background-color: color-mix(in oklab, var(--ls-primary-background-color) 70%, var(--ls-primary-text-color));
}

.light-theme,
.white-theme,
html[data-theme=light],
html[data-theme=light][data-color=logseq] {
    /* Text */
    --ls-primary-text-color: var(--color-black);

    /* Background */
    --ls-primary-background-color: var(--color-white);

    /* Accent */
    --rx-logseq-12: var(--color-black);
}

.dark-theme,
html[data-theme=dark],
html[data-theme=dark][data-color=logseq] {
    /* Text */
    --ls-primary-text-color: var(--color-white);

    /* Background */
    --ls-primary-background-color: var(--color-black);

    /* Accent */
    --rx-logseq-12: var(--color-white);
}

.form-checkbox {
    border-radius: 1em;
}

/* Code */
/* .inline code { */
/* color: var(--color-blue); */
/* background-color: color-mix(in srgb, var(--color-blue) 10%, transparent); */
/* } */

/* .inline h1 code, */
/* .inline h2 code, */
/* .inline h3 code, */
/* .inline h4 code, */
/* .inline h5 code, */
/* .inline h6 code { */
/* color: var(--theme--color-heading); */
/* background-color: color-mix(in srgb, var(--theme--color-heading) 10%, transparent); */
/* } */

/* Others */
/* .bg-destructive\/90 { */
/* background-color: var(--color-red); */
/* } */