@import url("reset.css");
@import url("layout.css");
@import url("common.css");
@import url("specifics.css");

:root {
    --narrow-width: 700px;
    --medium-width: 1100px;

    --thin-line-unit: 1px;
    --spacing-unit: 0.5em;

    --logo-font-family: "Geist", sans-serif;
    --logo-font-weight: 700;
    --logo-font-style: normal;

    /* will be halved as inner-only */
    --logo-stroke-width: 80;

    --body-font-family: "Geist", sans-serif;
    --body-font-weight: 400;
    --body-font-style: normal;

    --data-font-family: "Geist Mono", monospace;
    --data-font-weight: 400;
    --data-font-style: normal;

    --meta-color: #aaaaaa;
    --accent-color: #cc11dd;
    --error-color: #CC0000;
    --warning-color: #ee7700;
    --success-color: #009900;

    --hex-null-color: #6C757D;
    --hex-new-color: #2B8CBE;
    --hex-fresh-color: #41AB5D;
    --hex-visited-color: #9B6FC3;
    --history-color: #E28F41;

    --checker-background: conic-gradient(
      #EEEEEE 90deg,
      #121212 90deg 180deg,
      #EEEEEE 180deg 270deg,
      #121212 270deg
      );
    --checker-background-size: 3px 3px;

    --page-color: #EEEEEE;
    --text-color: #121212;
    --border-color: #121212;
    --selected-color: #121212;
    --selected-text-color: #EEEEEE;
}

html.theme-dark {
    --page-color: #121212;
    --text-color: #DDDDDD;
    --border-color: #DDDDDD;
    --selected-color: #DDDDDD;
    --selected-text-color: #121212;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-color: #121212;
        --text-color: #DDDDDD;
        --border-color: #DDDDDD;
        --selected-color: #DDDDDD;
        --selected-text-color: #121212;
    }

    html.theme-light {
        --page-color: #DDDDDD;
        --text-color: #121212;
        --border-color: #121212;
        --selected-color: #121212;
        --selected-text-color: #DDDDDD;
    }
}