/* Theme tokens. Tailwind maps these to bg-*, text-*, border-* utilities (see @theme in index.php). */
:root {
    --accent: #8b5cf6;
    --accent-2: color-mix(in oklab, var(--accent), #06b6d4 55%);
    --accent-3: color-mix(in oklab, var(--accent), #ec4899 55%);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #09090d;
    --fg: #ececf1;
    --muted: #8a8a99;
    --line: rgb(255 255 255 / 0.08);
    --surface: rgb(255 255 255 / 0.035);
    --surface-2: rgb(255 255 255 / 0.07);
    --panel: #121218;
    --blob-opacity: 0.32;
    --grid-color: rgb(255 255 255 / 0.05);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f5f8;
    --fg: #17171c;
    --muted: #6b6b7a;
    --line: rgb(20 20 40 / 0.09);
    --surface: rgb(255 255 255 / 0.65);
    --surface-2: rgb(255 255 255 / 0.95);
    --panel: #ffffff;
    --blob-opacity: 0.22;
    --grid-color: rgb(20 20 40 / 0.06);
}

html { background: var(--bg); }
[hidden] { display: none !important; }
iconify-icon { display: inline-block; width: 1em; height: 1em; }

/* ---------- background ---------- */
#bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#bg .blob {
    position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%;
    filter: blur(90px); opacity: var(--blob-opacity);
    animation: drift 38s ease-in-out infinite alternate;
    transition: background 0.6s;
}
#bg .b1 { background: var(--accent); top: -30vmax; left: -15vmax; }
#bg .b2 { background: var(--accent-2); top: -25vmax; right: -25vmax; animation-duration: 46s; animation-delay: -12s; width: 45vmax; height: 45vmax; }
#bg .b3 { background: var(--accent-3); bottom: -38vmax; left: 25%; animation-duration: 52s; animation-delay: -20s; opacity: calc(var(--blob-opacity) * 0.6); }
#bg .gridlines {
    position: absolute; inset: 0; display: none;
    background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 100%);
}
#bg[data-bg="grid"] .gridlines { display: block; }
#bg[data-bg="grid"] .b2, #bg[data-bg="grid"] .b3 { display: none; }
#bg[data-bg="grid"] .b1 { opacity: calc(var(--blob-opacity) * 0.5); }
#bg[data-bg="plain"] .blob { display: none; }

@keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(8vmax, 6vmax) scale(1.12); }
    100% { transform: translate(-6vmax, 10vmax) scale(0.94); }
}

/* ---------- headline ---------- */
.clock-text {
    background: linear-gradient(180deg, var(--fg) 30%, color-mix(in oklab, var(--fg), transparent 45%));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1.05; padding-bottom: 0.05em;
}
.clock-text .colon { animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- cursor glow on cards ---------- */
.glow { --mx: 50%; --my: 50%; }
.glow::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in oklab, var(--accent), transparent 86%), transparent 70%);
    opacity: 0; transition: opacity 0.3s;
}
.glow:hover::before { opacity: 1; }

/* ---------- keyboard selection ---------- */
.item.is-selected { outline: 2px solid color-mix(in oklab, var(--accent), transparent 30%); outline-offset: 2px; }

/* ---------- entrance animation ---------- */
.rise { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- edit mode ---------- */
.editing .item { cursor: grab; }
.editing .item:hover { border-color: color-mix(in oklab, var(--accent), transparent 50%); }
.sortable-ghost { opacity: 0.35; }
.sortable-chosen { cursor: grabbing; }
.wiggle { animation: wiggle 0.35s ease-in-out; }
@keyframes wiggle { 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }

/* ---------- dialog ---------- */
#modal::backdrop { background: rgb(5 5 10 / 0.55); backdrop-filter: blur(6px); }
#modal[open] { animation: pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.field {
    width: 100%; height: 2.75rem; border-radius: 0.75rem; padding: 0 0.875rem;
    background: var(--surface); border: 1px solid var(--line); color: var(--fg); outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus { border-color: color-mix(in oklab, var(--accent), transparent 40%); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 88%); }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.5rem; }
select.field option { background: var(--panel); }

/* toggle switch */
.switch { position: relative; width: 2.5rem; height: 1.5rem; flex-shrink: 0; appearance: none; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.3, 1.3); }
.switch:checked { background: var(--accent); border-color: transparent; }
.switch:checked::after { transform: translateX(1rem); }

.swatch { width: 1.75rem; height: 1.75rem; border-radius: 999px; appearance: none; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); transition: transform 0.15s; }
.swatch:hover { transform: scale(1.1); }
.swatch:checked { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--c); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* round custom colour picker */
input[type="color"] { appearance: none; -webkit-appearance: none; overflow: hidden; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 999px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 999px; }