/* Family Space design tokens. Color literals live here, never in components. */
:root {
    color-scheme: light;
    --space-bg: #f8fafc;
    --space-surface: #ffffff;
    --space-secondary: #f1f5f9;
    --space-ink: #0f172a;
    --space-muted: #59697f;
    --space-border: #e2e8f0;
    --space-accent: #4f46e5;
    --space-accent-dark: #4338ca;
    --space-on-accent: #ffffff;
    --space-soft: #eef2ff;
    --space-cyan: #06788e;
    --space-cyan-soft: #ecfeff;
    --space-success: #15743b;
    --space-success-soft: #ecfdf3;
    --space-warning: #97500a;
    --space-warning-soft: #fffbeb;
    --space-error: #be123c;
    --space-error-soft: #fff1f2;
    --space-rail: #f1f5f9;
    --space-overlay: #0b112099;
    --space-shadow: 0 8px 32px #0f172a06, 0 1px 3px #0f172a06;
    --space-shadow-lg: 0 24px 80px #0f172a24;
    --space-focus: #4f46e5;
    --space-map-filter: saturate(.7);
    --space-video: #080e1b;
    --route-metro: #a12e53;
    --route-tram: #a74324;
    --route-bus: #24644e;
    --route-train: #325eab;
    --route-ferry: #156675;
    --route-funicular: #785126;
    --route-on-color: #ffffff;
    --avatar-dark: #000000;
    --avatar-light: #ffffff;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
    --font-xs: .75rem; --font-sm: .875rem; --font-body: 1rem;
    --font-title: clamp(1.75rem, 2.6vw, 2.5rem);
    --motion: 160ms;
    --pt-ink: var(--space-ink); --pt-muted: var(--space-muted);
    --pt-green: var(--space-accent); --pt-border: var(--space-border);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --space-bg: #0b1120;
    --space-surface: #151e30;
    --space-secondary: #1e293b;
    --space-ink: #f8fafc;
    --space-muted: #a2b1c7;
    --space-border: #334155;
    --space-accent: #818cf8;
    --space-accent-dark: #a5b4fc;
    --space-on-accent: #0b1120;
    --space-soft: #242e50;
    --space-cyan: #22d3ee;
    --space-cyan-soft: #123344;
    --space-success: #4ade80;
    --space-success-soft: #142f2c;
    --space-warning: #fbbf24;
    --space-warning-soft: #332c1e;
    --space-error: #fb7185;
    --space-error-soft: #382235;
    --space-rail: #10192a;
    --space-overlay: #020617b8;
    --space-shadow: 0 8px 32px #00000014, 0 1px 3px #00000014;
    --space-shadow-lg: 0 24px 80px #00000055;
    --space-focus: #a5b4fc;
    --space-map-filter: brightness(.65) saturate(.65);
}
.theme-control { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.theme-control > .app-icon { color: var(--space-muted); flex-shrink: 0; }
.theme-picker { width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 8px 28px 8px 10px; font-size: .8125rem; }
.member-panel > .theme-control { margin: 20px 0 8px; padding-top: 20px; border-top: 1px solid var(--space-border); }
.member-panel .theme-picker { flex: 1; }
.ai-settings-body .theme-control { display: flex; margin-top: 8px; }
.language-control { display: inline-flex; align-items: center; gap: 6px; color: var(--space-muted); font-size: .8125rem; min-width: 0; margin: 0; }
.language-control > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.language-picker { width: auto; max-width: 100%; min-width: 0; margin: 0; padding: 8px 24px 8px 8px; font-size: .8125rem; }
.auth-brand-row { flex-wrap: wrap; gap: 8px; }
.member-panel > .language-control { display: flex; margin-bottom: 8px; }
.ai-settings-body .language-control { margin-top: 8px; }
.calendar-topbar { flex-wrap: wrap; }
@media (max-width: 740px) {
    .pt-topbar { flex-wrap: wrap; }
    .pt-topbar-right { flex-wrap: wrap; justify-content: flex-end; }
    .pt-topbar-right .pt-city { display: none; }
    .calendar-topbar > .language-control { order: 4; margin-left: auto; }
}
@media (max-width: 520px) {
    .pt-tabs:lang(uk) { flex-wrap: wrap; }
    .pt-tabs:lang(uk) > button { flex-basis: calc(50% - 4px); }
}