@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root,
[data-theme="peach"] {
    --bg: #fdeedd;
    --bg-dot: #f6d9bd;
    --paper: #fff8ee;
    --paper-2: #ffeedd;
    --ink: #573f3b;
    --ink-soft: #a37369;
    --line: #c98a7a;
    --shadow: #f0b9a4;
    --primary: #f48a9c;
    --primary-d: #d96b80;
    --accent: #9fd9c0;
    --accent-d: #6fb99b;
    --sun: #ffd37a;
    --stripe-a: #f48a9c;
    --stripe-b: #fbb4c0;
}

[data-theme="butter"] {
    --bg: #fff6d0;
    --bg-dot: #f7e6a0;
    --paper: #fffdf0;
    --paper-2: #fff3c4;
    --ink: #5d4a32;
    --ink-soft: #9a8462;
    --line: #c4a56a;
    --shadow: #ecd48a;
    --primary: #8fd3b8;
    --primary-d: #60b496;
    --accent: #ff9f88;
    --accent-d: #e57e68;
    --sun: #ffcf5c;
    --stripe-a: #8fd3b8;
    --stripe-b: #bfe9d8;
}

[data-theme="berry"] {
    --bg: #f6e0e1;
    --bg-dot: #ecc7cb;
    --paper: #fff4ee;
    --paper-2: #fbe3df;
    --ink: #6a3a45;
    --ink-soft: #a87580;
    --line: #b9707f;
    --shadow: #dca3ab;
    --primary: #c9627c;
    --primary-d: #a54761;
    --accent: #efb170;
    --accent-d: #d4914d;
    --sun: #f6d28a;
    --stripe-a: #c9627c;
    --stripe-b: #e49aad;
}

[data-theme="lavender"] {
    --bg: #eee7fa;
    --bg-dot: #d9cbef;
    --paper: #fbf8ff;
    --paper-2: #e8def8;
    --ink: #493b65;
    --ink-soft: #83739f;
    --line: #9b83c2;
    --shadow: #c8b5e7;
    --primary: #aa8bd8;
    --primary-d: #8063b0;
    --accent: #b9dfd2;
    --accent-d: #78b69e;
    --sun: #f6d98b;
    --stripe-a: #aa8bd8;
    --stripe-b: #c5afe8;
}

[data-theme="ocean"] {
    --bg: #dff1f5;
    --bg-dot: #c2e2e9;
    --paper: #f5fcfd;
    --paper-2: #d7edf1;
    --ink: #315463;
    --ink-soft: #6c919b;
    --line: #6eabb7;
    --shadow: #a6d3dc;
    --primary: #54aebe;
    --primary-d: #348494;
    --accent: #f1c87b;
    --accent-d: #d29e4c;
    --sun: #f6d98b;
    --stripe-a: #54aebe;
    --stripe-b: #8bcbd4;
}

[data-theme="matcha"] {
    --bg: #e8f0d8;
    --bg-dot: #d0dfb6;
    --paper: #f8fbed;
    --paper-2: #e0ebc9;
    --ink: #43563a;
    --ink-soft: #7e916b;
    --line: #8aa272;
    --shadow: #bfd19f;
    --primary: #91b96f;
    --primary-d: #668c4d;
    --accent: #f1bd91;
    --accent-d: #d69263;
    --sun: #f5d675;
    --stripe-a: #91b96f;
    --stripe-b: #b6d398;
}

[data-theme="sunset"] {
    --bg: #ffebd8;
    --bg-dot: #f5cead;
    --paper: #fff8ef;
    --paper-2: #ffe5ce;
    --ink: #704734;
    --ink-soft: #a5775b;
    --line: #c28b65;
    --shadow: #edba91;
    --primary: #ef936c;
    --primary-d: #c96c4a;
    --accent: #a8d6be;
    --accent-d: #6ca88a;
    --sun: #ffd36f;
    --stripe-a: #ef936c;
    --stripe-b: #f6b48e;
}


html,
body {
    min-height: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg) !important;
    background-image: radial-gradient(var(--bg-dot) 2px, transparent 2.5px) !important;
    background-size: 28px 28px !important;
    background-position: 0 0 !important;
    color: var(--ink) !important;
    font-family: "VT323", monospace !important;
}

.page-centered {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.card {
    padding: 30px;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 10px;
    box-shadow: 8px 8px 0 var(--shadow);
    text-align: center;
}

.brand {
    font-family: "Press Start 2P", monospace;
    color: var(--primary-d) !important;
    text-decoration: none;
}

.button {
    display: inline-block;
    padding: 12px 14px;
    border: 3px solid var(--ink);
    border-radius: 7px;
    background: var(--primary);
    box-shadow: 0 4px 0 var(--primary-d);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font: 8px "Press Start 2P", monospace;
    cursor: pointer;
    transition: transform 80ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
}

.button--secondary {
    background: var(--paper);
    box-shadow: 0 4px 0 #dfc5b3;
    color: var(--ink);
}

.button--block {
    display: block;
    width: 100%;
}

@media (max-width: 420px) {
    .card {
        padding: 22px 16px;
    }

    .button {
        font-size: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button {
        transition: none;
    }

    .button:hover {
        transform: none;
    }
}


input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea {
    cursor: text;
}

.retro-page {
    background: transparent !important;
}

.topbar {
    min-height: 48px;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 6px;
    box-shadow: 5px 5px 0 var(--shadow);
}

.status-dot {
    background: var(--accent-d) !important;
    border: 2px solid var(--ink) !important;
}

.workspace {
    max-width: 1050px;
}

.window {
    background: var(--paper) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 8px;
    box-shadow: 8px 8px 0 var(--shadow) !important;
    overflow: hidden;
}

.window-titlebar {
    background: repeating-linear-gradient(
        -45deg,
        var(--stripe-a) 0 12px,
        var(--stripe-b) 12px 24px
    ) !important;
    color: #fff !important;
    border-bottom: 3px solid var(--ink) !important;
}

.window-title {
    padding: 6px 10px;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: 2px solid var(--ink);
    border-radius: 4px;
    font-family: "Press Start 2P", monospace;
}

.window-control {
    background: var(--paper) !important;
    border: 3px solid var(--ink) !important;
    color: var(--ink);
    border-radius: 50%;
}

.window-button {
    background: var(--paper) !important;
    border: 2px solid var(--ink) !important;
    border-radius: 50%;
}

.window-control.middle,
.window-button.middle {
    background: var(--sun) !important;
}

.window-control.right,
.window-button.right {
    background: var(--accent) !important;
}

.window-content {
    color: var(--ink);
}

.info-panel,
.contract-paper {
    background: var(--paper-2) !important;
    border-color: var(--ink) !important;
    box-shadow: inset 0 0 0 3px var(--shadow) !important;
}

.rate-box,
.checkbox-box,
.account-email,
.agreement-box {
    background: var(--accent) !important;
    border-color: var(--ink) !important;
}

.section-title,
.intro h1,
.contract-header h2,
.contract-section h3,
.signature-area label,
.form-group label {
    color: var(--ink) !important;
}

.section-title {
    border-color: var(--line) !important;
}

input:not([type="checkbox"]):not([type="range"]),
select,
.signature-pad-wrapper,
#signature-pad {
    background-color: var(--paper) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;
}

input:focus,
select:focus,
.signature-input:focus {
    border-color: var(--primary-d) !important;
    box-shadow: 3px 3px 0 var(--shadow) !important;
}

input[type="range"],
input[type="checkbox"] {
    accent-color: var(--primary-d) !important;
}

.logout-button,
.back-link,
.footer a {
    color: var(--primary-d) !important;
}

.error,
.errors {
    background: #fbe3df !important;
    color: #762f22 !important;
    border-color: #8f402d !important;
}

@media (max-width: 700px) {
    .topbar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .workspace {
        width: calc(100% - 30px);
    }
}