:root {
    --font-ui: "Bree Serif", sans-serif;
    --font-prose: "Inter", serif;
    --font-button: "Bree Serif", serif;

    --font-size-biggest: 2.2rem;
    --font-size-bigger: 1.65rem;
    --font-size-big: 1.45rem;
    --font-size-medium: 1.2rem;
    --font-size-small: 0.95rem;
    --font-size-tiny: 0.85rem;
    --font-size-tiniest: 0.65rem;

    --bg: #EFECE3;
    --surface: #f3f1eb;
    --input-bg: #EFECE3;
    --border: #585858;
    --text: #343333;
    --page-text: #3d3737;
    --muted: #4f4f4f;
    --accent: #4A70A9;
    --high-accent: #1044b5;

    --border-default: 1px solid var(--border);
    --error: #e5534b;
}

html[data-theme="luxury"] {
    --bg: #2e1103;
    --surface: #f3f1eb;
    --input-bg: #EFECE3;
    --border: #180602;
    --text: #181616;
    --page-text: #e7dddd;
    --muted: #1f0a05;
    --accent: #f47476;
    --high-accent: #d94a4a;
    --border-default: 1px solid var(--border);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 250;
    /* outline: 1px solid red; */
}

button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

button {
    font-family: var(--font-button);
}

input,
select,
textarea {
    background: var(--input-bg);
}

input:not(.seg-val):focus,
select:focus,
textarea:focus,
.date-unit:focus-within {
    box-shadow: 0 0 0 1px var(--border);
}

a {
    color: var(--accent);
}

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    letter-spacing: 0.04em;
}

.page-layout {
    min-height: 100vh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 4vh;
    position: relative;
}

h1 {
    font-size: var(--font-size-biggest);
    color: var(--text);
    letter-spacing: 0;
}

h2, h3, h4, h5, h6 {
    letter-spacing: 0;
}

.site-brand,
.site-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-brand strong {
    font-weight: 500;
    color: var(--page-text);
    letter-spacing: 0;
}

.site-links a {
    color: var(--page-text);
    text-decoration: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.site-links a:hover {
    color: var(--accent);
}

.site-links a[href*="ko-fi"] {
    color: var(--accent);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    transition: color 0.15s, background 0.15s, transform 0.15s;
}

.site-links a[href*="ko-fi"]:hover {
    color: white;
    background: var(--page-text);
    transform: translateY(-1px);
}

/* Shared style for Undo and Apply action buttons */
.action-side-btn {
    background: var(--bg);
    border: 2.5px dashed var(--muted);
    color: var(--muted);
    border-radius: 4px 7px 5px 3px;
    cursor: pointer;
    box-shadow: 0 1px 0 0 var(--muted);
    transition: box-shadow 0.1s, transform 0.1s;
}

.action-side-btn:not(:disabled):hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    border-style: solid;
    box-shadow: 0 1px 0 0 var(--border);
}

.action-side-btn:not(:disabled):active {
    transform: translateY(2px);
    box-shadow: none;
}

.action-side-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    transform: none;
}

/* Abbreviations and labels */
abbr,
.seg-label,
.reset-label {
    font-variant-caps: all-small-caps;
    text-decoration: none;
}