/* Theme tokens */
:root {
    --df-bg: #fbfaf7;
    --df-bg-muted: #f2ede4;
    --df-fg: #2e2c28;
    --df-fg-muted: #8c8478;
    --df-card-bg: #fffdfa;
    --df-border: #e6ddd0;
    --df-link: #b5622a;
    --df-accent: #b5622a;
    color-scheme: light;
}

html[data-theme="dark"] {
    --df-bg: #1b1a1f;
    --df-bg-muted: #242229;
    --df-fg: #eae6df;
    --df-fg-muted: #9a9188;
    --df-card-bg: #262430;
    --df-border: #3a3742;
    --df-link: #e08a4f;
    --df-accent: #e08a4f;
    color-scheme: dark;
}

/* Base */
body {
    background: var(--df-bg);
    color: var(--df-fg);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--df-fg);
}

a {
    color: var(--df-link);
}

hr,
.uk-navbar,
.uk-card-default,
.uk-offcanvas-bar {
    border-color: var(--df-border);
}

.uk-background-default {
    background: var(--df-bg) !important;
}

.uk-section-muted {
    background: var(--df-bg-muted) !important;
}

.uk-card-default {
    background: var(--df-card-bg) !important;
    color: var(--df-fg);
}

.uk-text-meta,
.uk-text-muted {
    color: var(--df-fg-muted) !important;
}

.uk-navbar-nav > li > a {
    color: var(--df-fg);
    opacity: 0.6;
}

.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a:focus {
    opacity: 1;
}

.uk-navbar-nav > li.uk-active > a {
    color: var(--df-accent);
    opacity: 1;
}

.uk-offcanvas-bar {
    background: var(--df-bg);
}

.uk-offcanvas-bar .uk-nav-default > li > a {
    color: var(--df-fg);
    opacity: 0.6;
    font-size: 1.25rem;
    padding: 10px 0;
}

.uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
    color: var(--df-accent);
    opacity: 1;
}

.uk-offcanvas-bar .uk-close {
    color: var(--df-fg-muted);
}

.uk-offcanvas-bar .uk-close:hover {
    color: var(--df-fg);
}

.uk-pagination > * > * {
    color: var(--df-fg-muted);
}

.uk-pagination > .uk-active > * {
    color: var(--df-fg);
}

.uk-icon-button {
    background: var(--df-card-bg);
    color: var(--df-fg-muted);
}

.uk-slidenav {
    color: var(--df-fg-muted);
}

.uk-list > li > a {
    color: var(--df-link);
}

blockquote {
    color: var(--df-fg-muted);
    border-left-color: var(--df-border);
}

/* Logo needs to stay visible against a dark navbar */
html[data-theme="dark"] .uk-logo img {
    filter: invert(1);
}

/* Type scale */
h1.uk-text-light {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2.uk-text-light {
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

.uk-card-default .uk-card-title,
.uk-card-title {
    color: var(--df-fg);
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.uk-card-header .uk-icon,
.uk-card-header time {
    display: inline-flex;
    align-items: center;
    margin-top: 0.25rem;
}

/* Theme toggle button */
.df-theme-toggle {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.df-theme-toggle .df-icon-dark,
html[data-theme="dark"] .df-theme-toggle .df-icon-light {
    display: none;
}

html[data-theme="dark"] .df-theme-toggle .df-icon-dark {
    display: inline-flex;
}

.uk-offcanvas-bar .df-theme-toggle {
    color: var(--df-fg-muted);
    margin-top: 20px;
}

.uk-offcanvas-bar .df-theme-toggle svg {
    width: 22px;
    height: 22px;
}

.uk-offcanvas-bar .df-theme-toggle:hover {
    color: var(--df-fg);
}

/* Homepage portrait */
.uk-align-left {
    border-radius: 4px;
}

/* Year divider in photo/project list pages */
.uk-list > li > h2.uk-text-light {
    margin-top: 2rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--df-border);
}

.uk-list > li > h2.uk-text-light:first-child {
    margin-top: 0;
}

/* Leaflet dark tiles */
html[data-theme="dark"] .leaflet-tile {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}

html[data-theme="dark"] .leaflet-container {
    background: var(--df-bg-muted);
}