@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* we support light and dark schemes */
    color-scheme: dark;

    /* set of all colors used */
    --default-bg: #0a0a0a;
    --default-fg: #d0d0d0;
    --default-outline: #222222;

    --surface-bg: #151515;
    --surface-fg: #e0e0e0;
    --surface-outline: #333333;

    --inner-bg: #222222;
    --inner-fg: #f0f0f0;
    --inner-outline: #646464;

    --primary: #80b0a0;

    --error: #e08080;

    --warn: #e0d090;

    /* default values (default layer) */
    --bg: var(--default-bg);
    --fg: var(--default-fg);
    --outline: var(--default-outline);

    --ontop-bg: var(--surface-bg);
    --ontop-fg: var(--surface-fg);
    --ontop-outline: var(--surface-outline);
}

[data-layer="default"] {
    --bg: var(--default-bg);
    --fg: var(--default-fg);
    --outline: var(--default-outline);

    --ontop-bg: var(--surface-bg);
    --ontop-fg: var(--surface-fg);
    --ontop-outline: var(--surface-outline);
}
[data-layer="surface"] {
    --bg: var(--surface-bg);
    --fg: var(--surface-fg);
    --outline: var(--surface-outline);

    --ontop-bg: var(--inner-bg);
    --ontop-fg: var(--inner-fg);
    --ontop-outline: var(--inner-outline);
}
[data-layer="inner"] {
    --bg: var(--inner-bg);
    --fg: var(--inner-fg);
    --outline: var(--inner-outline);

    /* no ontop of inner -- fallback */
    --ontop-bg: var(--inner-bg);
    --ontop-fg: var(--inner-fg);
    --ontop-outline: var(--inner-outline);
}
[data-layer="primary"] {
    --fg: var(--primary);
    --outline: var(--primary);

    --ontop-bg: var(--fg);
    --ontop-fg: var(--bg);
    --ontop-outline: var(--primary);
}
[data-layer="error"] {
    --fg: var(--error);
    --outline: var(--error);

    --ontop-bg: var(--fg);
    --ontop-fg: var(--bg);
    --ontop-outline: var(--error);
}
[data-layer="warn"] {
    --fg: var(--warn);
    --outline: var(--warn);

    --ontop-bg: var(--fg);
    --ontop-fg: var(--bg);
    --ontop-outline: var(--warn);
}

:root[theme=light] {
    --fg:      #111;
    --fg-alt:  #222;
    --bg:      #fff;
    --bg-alt:  #ddd;
    --accent:  #ccc;
    --primary: #8ba;
    --primary: #687;
}

* {
    font-family: "Noto Serif", serif;
    font-size: 12pt;
    color: var(--default-fg);
    margin: 0;
    padding: 0;
}

body {
    background: var(--default-bg);
    margin: 0;

    display: flex;
    justify-content: center;
}

main {
    width: min(80vw, max(80vh, 700px));
}

a:hover, a {
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}

card-elem {
    display: block;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1em 0;
    background-color: var(--bg);
    border: 1px solid var(--outline);
}

button, .button {
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--outline);
    padding: 0.5em 1em;
    border-radius: 8px;
    transition: background-color 120ms, color 0.1s;
    text-decoration: none;
}

button:hover, .button:hover {
    background-color: var(--ontop-bg);
    color: var(--ontop-fg);
    border-color: var(--ontop-outline);
    text-decoration: none;
}

*:focus {
    outline: 1px solid var(--primary);
    box-shadow: 0px 0px 4px var(--outline);
}

input[type=text],
input[type=date],
input[type=number],
select
{
    box-sizing: border-box;
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--outline);
    padding: 0.25em 0.5em;
    border-radius: 8px;
    transition: background-color 120ms, color 0.1s;
}


h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
    margin-bottom: 1rem;
    color: var(--fg);
}

p {
    margin-bottom: 1rem;
    color: var(--fg);
}

blockquote {
    display: block;
    margin: 0;
    padding: 1em 0em 1em 2em;
    color: var(--ontop-fg);
    background: var(--ontop-bg);
    font-style: italic;
    border-left: 0.5em solid;
    border-radius: 8px;
    border-color: var(--ontop-outline);
}

hr {
    color: var(--outline);
}


input[type="checkbox"], input[type="radio"] {
  appearance: none;

  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--outline);
  background-color: var(--ontop-bg);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: 120ms border-color ease-in-out;
}

input[type="checkbox"] {
    border-radius: 4px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

input[type="checkbox"]::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--bg);
    clip-path: polygon(14% 44%, 0% 59%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="radio"]::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--bg);
}

input:checked::before {
    transform: scale(1);
}

#themer { color: var(--primary); cursor: pointer; }

#title { font-family: "Gloock", serif; font-size: 1.5em; margin-block: 1em; }