/* YukiBoard — shared tokens (matches the YukiMeet family) */
:root {
    color-scheme: light;
    --bg-base: #f5f2ec;
    --bg-surface: #fffdf9;
    --bg-surface-glass: rgba(255, 253, 249, 0.82);
    --border-subtle: rgba(38, 42, 46, 0.09);
    --border-strong: rgba(38, 42, 46, 0.16);
    --text-main: #24282c;
    --text-sub: #575d63;
    --text-dim: #8a8f94;
    --card-bg: rgba(255, 253, 249, 0.8);
    --dock-bg: rgba(255, 253, 249, 0.94);
    --dock-btn: #3d4349;
    --dock-btn-hover: rgba(38, 42, 46, 0.06);
    --input-bg: rgba(38, 42, 46, 0.045);
    --grid-dot: rgba(38, 42, 46, 0.16);
    --canvas-bg: #f7f4ee;
    --btn-primary-bg: #24282c;
    --btn-primary-text: #fffdf9;
    --accent-rgb: 42 135 119;
    --on-accent: #ffffff;
    --warm-rgb: 214 140 69;
    --calm-rgb: 76 128 176;
    --coral-rgb: 207 102 92;
    --shadow-card: 0 18px 40px -22px rgba(70, 55, 30, 0.22);
    --shadow-pop: 0 40px 80px -36px rgba(70, 55, 30, 0.35);
    --shadow-float: 0 16px 36px -14px rgba(70, 55, 30, 0.28);
}
html.dark {
    color-scheme: dark;
    --bg-base: #121416;
    --bg-surface: #191c1f;
    --bg-surface-glass: rgba(25, 28, 31, 0.74);
    --border-subtle: rgba(236, 232, 224, 0.08);
    --border-strong: rgba(236, 232, 224, 0.15);
    --text-main: #ece8e0;
    --text-sub: #a5a9a6;
    --text-dim: #6f7471;
    --card-bg: rgba(27, 30, 33, 0.72);
    --dock-bg: rgba(25, 28, 31, 0.92);
    --dock-btn: rgba(236, 232, 224, 0.8);
    --dock-btn-hover: rgba(236, 232, 224, 0.08);
    --input-bg: rgba(236, 232, 224, 0.05);
    --grid-dot: rgba(236, 232, 224, 0.11);
    --canvas-bg: #141618;
    --btn-primary-bg: #ece8e0;
    --btn-primary-text: #121416;
    --accent-rgb: 110 196 178;
    --on-accent: #0f1c19;
    --warm-rgb: 232 177 112;
    --calm-rgb: 130 170 210;
    --coral-rgb: 232 128 116;
    --shadow-card: 0 18px 44px -20px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
    --shadow-float: 0 16px 36px -10px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: 'Instrument Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s ease, color 0.25s ease;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
    font-size: 20px; line-height: 1; user-select: none;
}
.font-headline { font-family: 'Plus Jakarta Sans', sans-serif; }
.text-accent { color: rgb(var(--accent-rgb)); }
.text-warm { color: rgb(var(--warm-rgb)); }
.text-sub { color: var(--text-sub); }
.text-dim { color: var(--text-dim); }

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost {
    background: var(--input-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-ghost:hover { background: var(--dock-btn-hover); border-color: var(--border-strong); }
.btn-ghost:active { transform: scale(0.98); }
.icon-btn {
    width: 36px; height: 36px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-subtle);
    color: var(--text-sub);
    transition: color 0.15s ease, background 0.15s ease;
}
.icon-btn:hover { color: var(--text-main); background: var(--dock-btn-hover); }
.icon-btn .material-symbols-outlined { font-size: 18px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
    width: 32px; height: 32px; border-radius: 10px;
    background: rgb(var(--accent-rgb));
    display: flex; align-items: center; justify-content: center;
    color: var(--on-accent);
}
.brand-mark .material-symbols-outlined { font-size: 19px; }
.brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }

.spatial-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
}

#toast {
    position: fixed; top: 24px; left: 50%;
    transform: translate(-50%, -8px);
    background: var(--bg-surface); color: var(--text-main);
    border: 1px solid var(--border-strong);
    padding: 10px 18px; border-radius: 9999px;
    font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-float);
    opacity: 0; pointer-events: none; z-index: 10000;
    transition: opacity 0.25s ease, transform 0.25s ease;
    display: flex; align-items: center; gap: 8px;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast .material-symbols-outlined { font-size: 18px; color: rgb(var(--accent-rgb)); }