/*------------------------------------------------------------------------------
              Notebook Background Color Schemes by CyanVoxel v2.1.1

These a few CSS classes that mimic a few of my real-world pages and pen colors.
Go ahead and try it out! You can change or add new color variables or entire new
classes and combinations. Inside Obsidian, apply a page class with an optional
pen color class to see the effects. Add the recolor-images class to recolor
the images in your notes, too!

Website used to generate Color Filters:
https://angel-rs.github.io/css-color-filter-generator

------------------------------------------------------------------------------*/

/* Global Variables */
:root {
    /* Base Pen Colors */
    --pen-white: #edf1fc;
    --pen-gray: #5f5d58;
    --pen-black: #26241f;
    --pen-red: #e14a49;
    --pen-green: #15b64f;
    --pen-blue: #3f76ed;
    --pen-light-blue: #54b6f8;
    --pen-purple: #9b4ff0;

    --neutral-pen-black: #272727;
    --neutral-pen-black-trans: #27272722;

    /* Page Colors */
    --page-white: #ffffff;
    --page-manila: #f3deaf;
    --page-blue: #3f76ed;

    /* Default Variables */
    --page-color: var(--page-manila);
    --accent-color: var(--pen-black);
    --accent-color-trans: color-mix(in srgb, var(--pen-black) 15%, transparent);

    --grid-size: 32px;
}

/* Recolors images on the page with the current accent color. */
.recolor-images img {
    filter: var(--image-effect);
}

/* ---------------------------- Page Backgrounds ---------------------------- */
/* All Pages */
.page-manila,
.page-white,
.page-blueprint {
    --text-normal: var(--accent-color);
    --text-muted: var(--accent-color);
    --text-faint: var(--accent-color-trans);
    --h1-color: var(--accent-color);
    --h2-color: var(--accent-color);
    --h3-color: var(--accent-color);
    --h4-color: var(--accent-color);
    --h5-color: var(--accent-color);
    --h6-color: var(--accent-color);
    --link-color: var(--pen-blue);
    --link-color-hover: var(--pen-light-blue);
    --link-unresolved-color: var(--pen-red);

    --hr-color: var(--accent-color);
    --blockquote-border-color: var(--accent-color);
    --embed-border-left: 2px solid var(--accent-color);
    --collapse-icon-color-collapsed: var(--accent-color);
    --checkbox-color: var(--accent-color);
    --checkbox-marker-color: var(--page-color);
    --checkbox-color-hover: var(--accent-color-trans);
    --checkbox-border-color: var(--accent-color);
    --checklist-done-color: var(--accent-color);
    --list-marker-color: var(--accent-color);

    --interactive-accent: var(--accent-color);
    --metadata-label-text-color: var(--accent-color);
    --metadata-input-text-color: var(--accent-color);
    --tag-color: var(--accent-color);
    --tag-background: var(--accent-color-trans);
    --pill-cover-hover: color-mix(in srgb, var(--accent-color) 60%, transparent);
    --background-modifier-border-focus: var(--accent-color);
    --background-modifier-border: var(--accent-color-trans);
    --background-modifier-hover: color-mix(in srgb,
            var(--accent-color) 60%,
            transparent);

    color: var(--accent-color);
    background-color: var(--page-color);
    font-weight: bold;
}

/* ----------------------- Manila/Tan Page Background ----------------------- */
/* Defaults to Black Pen */
.page-manila {
    --page-color: var(--page-manila);
    --accent-color: var(--pen-black);
    --accent-color-trans: color-mix(in srgb,
            var(--accent-color) 15%,
            transparent);
    --image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
    color-scheme: light;
}

.embed-manila img {
    background-color: var(--page-manila);
}

/* --------------------------- White Page Background ------------------------ */
/* Defaults to Black Pen */
.page-white {
    --page-color: var(--page-white);
    --accent-color: var(--neutral-pen-black);
    --accent-color-trans: color-mix(in srgb,
            var(--accent-color) 15%,
            transparent);
    --image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
    color-scheme: light;
}

.embed-white img {
    background-color: var(--page-white);
}

/* -------------------------- Blueprint Styled Page ------------------------- */
/* Defaults to White Pen */
.page-blueprint {
    --page-color: var(--page-blue);
    --accent-color: var(--pen-white);
    --accent-color-trans: color-mix(in srgb,
            var(--accent-color) 15%,
            transparent);
    --image-effect: brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%);
    color-scheme: dark;

    --link-color: color-mix(in srgb, var(--pen-light-blue) 60%, var(--pen-white));
    --link-color-hover: color-mix(in srgb,
            var(--pen-light-blue) 20%,
            var(--pen-white));
}

.embed-blueprint img {
    background-color: var(--page-blue);
}

/* Adds a grid layout on page background */
.page-grid {
    background-image: linear-gradient(0deg,
            transparent 0px,
            var(--accent-color-trans) 1px,
            var(--accent-color-trans) 2px,
            transparent 3px),
        linear-gradient(90deg,
            transparent calc(var(--grid-size) - 3px),
            var(--accent-color-trans) calc(var(--grid-size) - 2px),
            var(--accent-color-trans) calc(var(--grid-size) - 1px),
            transparent var(--grid-size));
    background-size: var(--grid-size) var(--grid-size);
}

/* ------------------------------- Pen Colors ------------------------------- */
/* Image Effects generated with:
      https://angel-rs.github.io/css-color-filter-generator */

/* All Colors */
:is(.page-white,
    .page-manila,
    .page-blueprint,
    .pen-white,
    .pen-blue,
    .pen-red,
    .pen-green,
    .pen-black,
    .pen-gray,
    .pen-purple) svg {
    color: color-mix(in srgb, var(--accent-color) 60%, transparent);
}

.pen-white {
    --accent-color: var(--pen-white);
    --accent-color-trans: color-mix(in srgb, var(--pen-white) 15%, transparent);
    color: var(--accent-color);
    --hr-color: var(--accent-color);
    --image-effect: brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%);
}

.pen-blue {
    --accent-color: var(--pen-blue);
    --accent-color-trans: color-mix(in srgb, var(--pen-blue) 15%, transparent);
    color: var(--accent-color);
    --hr-color: var(--accent-color);
    --image-effect: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(945%) hue-rotate(199deg) brightness(95%) contrast(95%);
}

.pen-red {
    --accent-color: var(--pen-red);
    --accent-color-trans: color-mix(in srgb, var(--pen-red) 15%, transparent);
    color: var(--accent-color);
    --hr-color: var(--accent-color);
    --image-effect: brightness(0) saturate(100%) invert(40%) sepia(41%) saturate(1024%) hue-rotate(316deg) brightness(99%) contrast(94%);
}

.pen-green {
    --accent-color: var(--pen-green);
    --accent-color-trans: color-mix(in srgb, var(--pen-green) 15%, transparent);
    color: var(--accent-color);
    --hr-color: var(--accent-color);
    --image-effect: brightness(0) saturate(100%) invert(52%) sepia(60%) saturate(2521%) hue-rotate(105deg) brightness(96%) contrast(84%);
}

.pen-black {
    --accent-color: var(--pen-black);
    --accent-color-trans: color-mix(in srgb, var(--pen-black) 15%, transparent);
    color: var(--accent-color);
    --hr-color: var(--accent-color);
    --image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
}

.pen-gray {
    --accent-color: var(--pen-gray);
    --accent-color-trans: color-mix(in srgb, var(--pen-gray) 15%, transparent);
    color: var(--accent-color);
    --hr-color: var(--accent-color);
    --image-effect: brightness(0) saturate(100%) invert(35%) sepia(13%) saturate(189%) hue-rotate(5deg) brightness(96%) contrast(86%);
}

.pen-purple {
    --accent-color: var(--pen-purple);
    --accent-color-trans: color-mix(in srgb, var(--pen-purple) 15%, transparent);
    color: var(--accent-color);
    --hr-color: var(--accent-color);
    --image-effect: brightness(0) saturate(100%) invert(33%) sepia(59%) saturate(2620%) hue-rotate(249deg) brightness(98%) contrast(93%);
}