:root {
  --font-sans: "Inter", sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
}

html,
:root,
html[data-theme],
body[data-theme] {
  color-scheme: dark;
}

html[data-theme],
body[data-theme] {
  --surface-rgb: 11 18 32;
  --panel: rgba(8, 16, 31, 0.82);
  --panel-2: rgba(10, 19, 36, 0.9);
  --panel-3: rgba(12, 22, 42, 0.96);
  --panel-soft: rgba(96, 165, 250, 0.08);
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(148, 163, 184, 0.26);
  --muted-2: var(--muted);
  --accent-soft: color-mix(in srgb, var(--primary) 18%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 18%, transparent);
  --page-bg:
    radial-gradient(circle at top left, var(--page-glow-1), transparent 30%),
    radial-gradient(circle at top right, var(--page-glow-2), transparent 24%),
    radial-gradient(circle at bottom right, var(--page-glow-3), transparent 28%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 42%, var(--bg-3) 100%);
  --shell-gradient:
    linear-gradient(180deg, rgba(8, 16, 31, 0.82), rgba(8, 16, 31, 0.68)),
    radial-gradient(circle at top, color-mix(in srgb, var(--primary) 16%, transparent), transparent 44%);
  --header-bg:
    linear-gradient(180deg, rgba(7, 14, 26, 0.94), rgba(7, 14, 26, 0.88)),
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%);
  --header-border: var(--line);
  --surface-shadow: 0 24px 52px rgba(2, 6, 23, 0.42);
  --brand-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 22%, transparent);
  --button-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 24%, transparent);
  --button-border: color-mix(in srgb, var(--primary) 22%, transparent);
  --score-ring-center: rgba(8, 16, 31, 0.98);
  --score-ring-track: rgba(148, 163, 184, 0.16);
  --hero-figure-start: color-mix(in srgb, var(--primary) 72%, white);
  --hero-figure-end: color-mix(in srgb, var(--primary) 54%, black);
}

html[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
  --surface-rgb: 255 255 255;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-2: rgba(255, 255, 255, 0.94);
  --panel-3: rgba(255, 255, 255, 0.98);
  --panel-soft: rgba(148, 163, 184, 0.08);
  --line: rgba(148, 163, 184, 0.22);
  --line-strong: rgba(100, 116, 139, 0.3);
  --muted-2: var(--muted);
  --accent-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  --page-bg:
    radial-gradient(circle at top left, var(--page-glow-1), transparent 28%),
    radial-gradient(circle at top right, var(--page-glow-2), transparent 24%),
    radial-gradient(circle at bottom right, var(--page-glow-3), transparent 24%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 42%, var(--bg-3) 100%);
  --shell-gradient:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.65)),
    radial-gradient(circle at top, color-mix(in srgb, var(--primary) 10%, transparent), transparent 44%);
  --header-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.88)),
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%);
  --header-border: var(--line);
  --surface-shadow: 0 24px 52px rgba(15, 23, 42, 0.08);
  --brand-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 20%, transparent);
  --button-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 18%, transparent);
  --button-border: color-mix(in srgb, var(--primary) 16%, transparent);
  --score-ring-center: rgba(255, 255, 255, 0.96);
  --score-ring-track: rgba(148, 163, 184, 0.18);
  --hero-figure-start: color-mix(in srgb, var(--primary) 88%, white);
  --hero-figure-end: color-mix(in srgb, var(--primary) 76%, black);
}

html[data-theme-id="clean_productivity"],
body[data-theme-id="clean_productivity"] {
  --bg: #08111f;
  --bg-2: #0f1b2e;
  --bg-3: #16253b;
  --text: #e5eefc;
  --muted: #94a3b8;
  --primary: #60a5fa;
  --primary-2: #2563eb;
  --accent: #34d399;
  --accent-2: #38bdf8;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --page-glow-1: rgba(37, 99, 235, 0.22);
  --page-glow-2: rgba(56, 189, 248, 0.18);
  --page-glow-3: rgba(52, 211, 153, 0.14);
}

html[data-theme-id="clean_productivity"][data-theme="light"],
body[data-theme-id="clean_productivity"][data-theme="light"] {
  --bg: #f8fafc;
  --bg-2: #f1f5f9;
  --bg-3: #e2e8f0;
  --text: #0f172a;
  --muted: #475569;
  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --accent: #22c55e;
  --accent-2: #0ea5e9;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --page-glow-1: rgba(37, 99, 235, 0.16);
  --page-glow-2: rgba(14, 165, 233, 0.12);
  --page-glow-3: rgba(34, 197, 94, 0.1);
}

html[data-theme-id="modern_workspace"],
body[data-theme-id="modern_workspace"] {
  --bg: #0a1020;
  --bg-2: #111a31;
  --bg-3: #17233f;
  --text: #eef2ff;
  --muted: #a5b4fc;
  --primary: #818cf8;
  --primary-2: #22d3ee;
  --accent: #22d3ee;
  --accent-2: #818cf8;
  --success: #2dd4bf;
  --warning: #fbbf24;
  --danger: #fb7185;
  --page-glow-1: rgba(129, 140, 248, 0.22);
  --page-glow-2: rgba(34, 211, 238, 0.18);
  --page-glow-3: rgba(15, 23, 42, 0.18);
  --header-bg:
    linear-gradient(180deg, rgba(10, 16, 32, 0.98), rgba(10, 16, 32, 0.92)),
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.14), transparent 42%);
  --header-border: rgba(255, 255, 255, 0.08);
  --header-text: #f8fafc;
  --header-muted: rgba(226, 232, 240, 0.72);
}

html[data-theme-id="modern_workspace"][data-theme="light"],
body[data-theme-id="modern_workspace"][data-theme="light"] {
  --bg: #f1f5f9;
  --bg-2: #e2e8f0;
  --bg-3: #cbd5e1;
  --text: #111827;
  --muted: #475569;
  --primary: #4f46e5;
  --primary-2: #06b6d4;
  --accent: #06b6d4;
  --accent-2: #4f46e5;
  --success: #14b8a6;
  --warning: #f59e0b;
  --danger: #ef4444;
  --page-glow-1: rgba(79, 70, 229, 0.16);
  --page-glow-2: rgba(6, 182, 212, 0.14);
  --page-glow-3: rgba(30, 41, 59, 0.08);
  --header-bg:
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(30, 41, 59, 0.9)),
    radial-gradient(circle at top left, rgba(6, 182, 212, 0.12), transparent 42%);
  --header-border: rgba(255, 255, 255, 0.08);
  --header-text: #f8fafc;
  --header-muted: rgba(226, 232, 240, 0.72);
}

html[data-theme-id="soft_minimal"],
body[data-theme-id="soft_minimal"] {
  --bg: #0f172a;
  --bg-2: #172033;
  --bg-3: #1e293b;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #60a5fa;
  --primary-2: #93c5fd;
  --accent: #34d399;
  --accent-2: #cbd5e1;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --page-glow-1: rgba(96, 165, 250, 0.18);
  --page-glow-2: rgba(203, 213, 225, 0.12);
  --page-glow-3: rgba(52, 211, 153, 0.12);
}

html[data-theme-id="soft_minimal"][data-theme="light"],
body[data-theme-id="soft_minimal"][data-theme="light"] {
  --bg: #f9fafb;
  --bg-2: #f3f4f6;
  --bg-3: #e5e7eb;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #3b82f6;
  --primary-2: #60a5fa;
  --accent: #10b981;
  --accent-2: #6b7280;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --page-glow-1: rgba(59, 130, 246, 0.14);
  --page-glow-2: rgba(107, 114, 128, 0.1);
  --page-glow-3: rgba(16, 185, 129, 0.08);
}

html[data-theme-id],
body[data-theme-id] {
  --surface-base: linear-gradient(180deg, rgba(var(--surface-rgb), 0.92), rgba(var(--surface-rgb), 0.8));
  --surface-strong: linear-gradient(180deg, rgba(var(--surface-rgb), 0.98), rgba(var(--surface-rgb), 0.92));
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --accent-soft-strong: color-mix(in srgb, var(--accent) 18%, transparent);
  --success-soft: color-mix(in srgb, var(--success) 14%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent);
}

body[data-theme-id="modern_workspace"][data-theme="light"] {
  --surface-rgb: 248 250 252;
  --shell-gradient:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.58)),
    radial-gradient(circle at top, rgba(79, 70, 229, 0.12), transparent 44%);
  --button-border: rgba(255, 255, 255, 0.14);
}

body[data-theme-id="soft_minimal"][data-theme="light"] {
  --surface-rgb: 255 255 255;
  --shell-gradient:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.7)),
    radial-gradient(circle at top, rgba(59, 130, 246, 0.08), transparent 44%);
}

body[data-theme-id] :is(.app-shell, .landing-shell) {
  border-color: var(--line) !important;
  background: var(--shell-gradient) !important;
  box-shadow: var(--surface-shadow) !important;
}

body[data-theme-id] :is(
  .panel,
  .subpanel,
  .timeline-card,
  .mini-card,
  .kpi,
  .metric-row,
  .schedule-item,
  .recent-item,
  .quick-action,
  .break-chip,
  .task-time,
  .projects-hero,
  .projects-panel,
  .project-detail-hero,
  .project-detail-panel,
  .account-hero,
  .account-panel,
  .project-modal-card,
  .task-editor-sheet,
  .task-editor-surface,
  .hero-card,
  .hero-player-card,
  .hero-meditation-stage
) {
  border-color: var(--line) !important;
  background: var(--surface-base), var(--panel) !important;
  box-shadow: var(--surface-shadow) !important;
}

body[data-theme-id] :is(.project-modal-card, .task-editor-dialog, .auth-dialog) {
  background: var(--surface-strong), var(--panel-3) !important;
}

body[data-theme="light"] .project-modal-scrim {
  background: rgba(248, 250, 252, 0.8) !important;
}

body[data-theme="light"] .universal-auth-dialog,
body[data-theme="light"] .universal-header .profile-menu-panel,
body[data-theme="light"] .universal-header .profile-menu-item {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.985)) !important;
  color: var(--text) !important;
}

body[data-theme-id] :is(.topbar, .universal-page-toolbar) {
  border-bottom-color: var(--line) !important;
  background: var(--surface-strong) !important;
}

body[data-theme-id] :is(
  .btn.primary,
  .chip-btn.primary,
  .projects-link.is-primary,
  .account-link.is-primary,
  .landing-btn-primary,
  .sound-type-btn.is-active,
  .hero-center-btn
) {
  border-color: var(--button-border) !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  box-shadow: var(--button-shadow) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body[data-theme-id] :is(
  .nav-item.active,
  .timeline-toggle-btn.is-active,
  .project-row:hover,
  .timeline-card.is-active,
  .current-block-note,
  .task-suggestion-item:hover,
  .profile-menu-item:hover
) {
  background: var(--primary-soft) !important;
  border-color: var(--line-strong) !important;
}

body[data-theme-id] :is(
  .status-pill.is-done,
  .tag.is-done,
  .project-health-pill.is-done
) {
  background: var(--success-soft) !important;
  border-color: color-mix(in srgb, var(--success) 26%, transparent) !important;
  color: var(--success) !important;
}

body[data-theme-id] :is(
  .status-pill.is-active,
  .tag.is-active
) {
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent) !important;
  color: var(--primary) !important;
}

body[data-theme-id] :is(
  .status-pill.is-skipped,
  .tag.is-skipped
) {
  background: var(--warning-soft) !important;
  border-color: color-mix(in srgb, var(--warning) 26%, transparent) !important;
  color: color-mix(in srgb, var(--warning) 72%, black) !important;
}

body[data-theme-id] :is(
  .project-row-url,
  .project-detail-client-line,
  .sound-type-btn,
  .badge,
  .player-type-pill
) {
  border-color: var(--line) !important;
}

body[data-theme-id] :is(
  .projects-brand-mark,
  .account-brand-mark,
  .brand-mark
) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 24%, white), color-mix(in srgb, var(--primary-2) 18%, transparent)) !important;
  box-shadow: var(--brand-shadow) !important;
}

body[data-theme-id="modern_workspace"] :is(.app-shell, .landing-shell) {
  border-color: rgba(30, 41, 59, 0.12) !important;
}

body[data-theme-id="modern_workspace"] :is(.projects-shell > [data-universal-header], .account-shell > [data-universal-header], .project-detail-shell > [data-universal-header]) {
  border-color: rgba(30, 41, 59, 0.12) !important;
}

body[data-theme-id="modern_workspace"] :is(.theme-switcher-select, .profile-trigger, .universal-menu-toggle) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body[data-theme-id="modern_workspace"] .universal-header .profile-menu-panel {
  background:
    linear-gradient(180deg, rgba(10, 16, 32, 0.995), rgba(10, 16, 32, 0.985)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body[data-theme-id="modern_workspace"] .universal-header .profile-menu-item {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

body[data-theme-id="modern_workspace"] .theme-mode-switcher {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body[data-theme-id="modern_workspace"] .theme-mode-btn {
  color: rgba(248, 250, 252, 0.76) !important;
}

body[data-theme-id="modern_workspace"] .theme-mode-btn.is-active {
  color: #fff !important;
}

body[data-theme-id="modern_workspace"] :is(.profile-trigger:hover, .profile-trigger[aria-expanded="true"]) {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

body[data-theme-id="modern_workspace"] .profile-trigger .icon-svg {
  color: #f8fafc !important;
  stroke: currentColor;
}