/* Hub compatibility theme.
   The Hub keeps its compact directory layout while consuming the same palette,
   type, depth and focus language as the Platform profile. */
[data-theme="dark"] {
    color-scheme: dark;
    --paper: var(--bg);
    --white: var(--surface-1);
    --ink: var(--text);
    --muted: var(--text-muted);
    --line: var(--border);
    --green: var(--accent);
    --green-soft: var(--accent-subtle);
    --orange: var(--brand);
    --orange-soft: var(--brand-subtle);
    --display: var(--font-display);
    --body: var(--font-sans);
    --shadow: var(--shadow-2);
}

[data-theme="light"] { color-scheme: light; }

[data-theme="dark"] body {
    background:
        radial-gradient(circle at 78% -12%, rgba(45, 212, 191, 0.12), transparent 34%),
        radial-gradient(circle at 8% 35%, rgba(217, 72, 47, 0.08), transparent 28%),
        var(--bg);
    color: var(--text);
}

[data-theme="dark"] .topbar {
    background: rgba(11, 17, 32, 0.88);
    border-color: var(--border);
    backdrop-filter: blur(16px);
}

[data-theme="dark"] .brand-mark {
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: 0 10px 28px rgba(217, 72, 47, 0.24);
}

[data-theme="dark"] .search,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .account,
[data-theme="dark"] .menu-toggle {
    background: var(--surface-1);
    border-color: var(--border-strong);
    color: var(--text-body);
}

[data-theme="dark"] .search:focus-within {
    outline-color: var(--accent);
    box-shadow: var(--focus-ring);
}

[data-theme="dark"] .search kbd {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--text-muted);
}

[data-theme="dark"] .sidebar {
    background: color-mix(in srgb, var(--surface-1) 88%, var(--bg));
    border-color: var(--border);
}

[data-theme="dark"] .nav-button,
[data-theme="dark"] .sidebar-links a {
    color: var(--text-muted);
}

[data-theme="dark"] .nav-button:hover,
[data-theme="dark"] .sidebar-links a:hover {
    background: var(--surface-2);
    color: var(--text);
}

[data-theme="dark"] .nav-button[aria-current="page"] {
    background: var(--accent-subtle);
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
    color: var(--accent-ink);
    box-shadow: inset 3px 0 var(--accent);
}

[data-theme="dark"] .sidebar-tip {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
    background: linear-gradient(145deg, var(--surface-2), var(--brand-subtle));
}

[data-theme="dark"] .welcome h1 em,
[data-theme="dark"] .welcome-aside a,
[data-theme="dark"] .section-head > button,
[data-theme="dark"] .detail-guide {
    color: var(--accent-ink);
}

[data-theme="dark"] .destination,
[data-theme="dark"] .demo-card,
[data-theme="dark"] .app-card,
[data-theme="dark"] .resource-strip,
[data-theme="dark"] .empty {
    background: var(--surface-1);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .destination {
    background: linear-gradient(145deg, var(--accent-subtle), var(--surface-1) 58%);
}

[data-theme="dark"] .destination.apps {
    background: linear-gradient(145deg, var(--brand-subtle), var(--surface-1) 58%);
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
}

[data-theme="dark"] .destination:hover,
[data-theme="dark"] .demo-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-3);
}

[data-theme="dark"] .destination.apps:hover,
[data-theme="dark"] .app-card:hover {
    border-color: var(--brand-hover);
}

[data-theme="dark"] .destination-icon,
[data-theme="dark"] .card-picture,
[data-theme="dark"] .card-picture img,
[data-theme="dark"] .resource-links a,
[data-theme="dark"] .empty button,
[data-theme="dark"] .close {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

[data-theme="dark"] .destination-icon { color: var(--accent-ink); }
[data-theme="dark"] .apps .destination-icon,
[data-theme="dark"] .app-card .app-link { color: var(--brand-ink); }

[data-theme="dark"] .destination p,
[data-theme="dark"] .apps p,
[data-theme="dark"] .card-content p,
[data-theme="dark"] .app-card p,
[data-theme="dark"] .resource-strip p,
[data-theme="dark"] .footer,
[data-theme="dark"] .dialog-body p {
    color: var(--text-muted);
}

[data-theme="dark"] .card-footer,
[data-theme="dark"] .dialog-top,
[data-theme="dark"] .preview-banner {
    background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-1));
    border-color: var(--border);
    color: var(--text-muted);
}

[data-theme="dark"] dialog {
    background: var(--surface-1);
    border-color: var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow-3);
}

[data-theme="dark"] dialog::backdrop { background: var(--overlay); }
[data-theme="dark"] .dialog-image { background: var(--code-bg); }
[data-theme="dark"] .detail-tags span { background: var(--accent-subtle); color: var(--accent-ink); }
[data-theme="dark"] .launch { background: var(--brand); color: #fff; }
[data-theme="dark"] .launch:hover { background: var(--brand-hover); }

[data-theme="dark"] .filter-row button {
    border-color: var(--border-strong);
    color: var(--text-body);
}

[data-theme="dark"] .filter-row button:hover { border-color: var(--accent); }
[data-theme="dark"] .filter-row button[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #06211e;
}

[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] input:focus-visible {
    outline-color: var(--accent);
    box-shadow: var(--focus-ring);
}
/* Keep every Hub theme on the platform's shared type system. */
:root {
  --display: var(--font-display);
  --body: var(--font-sans);
}