/*
 * Univer design system — source of truth.
 * Component styles consume semantic tokens; dark is the canonical default.
 */
:root {
  color-scheme: dark;

  /* Semantic color */
  --ds-color-bg-canvas: #07111f;
  --ds-color-bg-section: #07111f;
  --ds-color-bg-surface: rgba(10, 22, 44, 0.82);
  --ds-color-bg-surface-strong: rgba(13, 27, 52, 0.96);
  --ds-color-bg-elevated: rgba(17, 34, 64, 0.96);
  --ds-color-bg-subtle: rgba(101, 148, 255, 0.08);
  --ds-color-text-primary: #f5f7ff;
  --ds-color-text-secondary: #aeb8cc;
  --ds-color-text-tertiary: #7f8ba6;
  --ds-color-border: rgba(111, 144, 205, 0.2);
  --ds-color-border-strong: rgba(101, 148, 255, 0.48);
  --ds-color-accent-blue: #2876ed;
  --ds-color-accent-blue-strong: #1557cf;
  --ds-color-accent-cyan: #5bd7ff;
  --ds-color-accent-red: #e63245;
  --ds-color-success: #42dda1;
  --ds-color-warning: #ffbf5b;
  --ds-color-focus: #78a8ff;
  --ds-color-overlay: rgba(2, 8, 18, 0.82);
  --ds-color-foreground-on-dark: #f5f7ff;
  --ds-color-foreground-on-dark-muted: #aeb8cc;
  --ds-color-foreground-on-light: #132039;
  --ds-color-foreground-on-light-muted: #46566f;

  /* Theme composition: component CSS consumes these semantic recipes. */
  --ds-theme-toggle-bg: rgba(8, 18, 37, 0.72);
  --ds-theme-brand-background: transparent;
  --ds-theme-brand-border: transparent;
  --ds-theme-page-background: var(--ds-color-bg-canvas);
  --ds-theme-hero-background: var(--ds-color-bg-canvas);
  --ds-theme-grid-image: none;
  --ds-theme-aurora-opacity: 1;
  --ds-theme-nav-text: var(--ds-color-text-primary);
  --ds-theme-body-muted: var(--ds-color-text-secondary);
  --ds-theme-card-border: var(--ds-color-border);
  --ds-theme-card-background: var(--ds-color-bg-surface);
  --ds-theme-card-shadow: var(--ds-shadow-md);
  --ds-theme-dashboard-surface: var(--ds-color-bg-surface-strong);
  --ds-theme-dashboard-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-dashboard-inset-surface: var(--ds-color-bg-surface);
  --ds-theme-dashboard-inset-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-dashboard-active-surface: var(--ds-color-bg-elevated);
  --ds-theme-dashboard-active-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-media-surface: var(--ds-color-bg-canvas);
  --ds-theme-media-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-dashboard-muted: var(--ds-color-foreground-on-dark-muted);
  --ds-theme-dashboard-border: var(--ds-color-border);
  --ds-theme-dashboard-border-strong: var(--ds-color-border-strong);
  --ds-theme-dashboard-shadow: var(--ds-shadow-md);
  --ds-theme-dashboard-accent-surface: var(--ds-color-accent-blue);
  --ds-theme-dashboard-accent-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-primary-action-surface: var(--ds-color-accent-blue);
  --ds-theme-primary-action-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-secondary-action-surface: var(--ds-color-bg-surface);
  --ds-theme-secondary-action-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-icon-surface: var(--ds-color-bg-surface);
  --ds-theme-icon-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-inset-border: var(--ds-color-border);
  --ds-theme-inset-background: var(--ds-color-bg-subtle);
  --ds-theme-expert-background: var(--ds-color-bg-surface);
  --ds-theme-control-border: var(--ds-color-border);
  --ds-theme-control-background: var(--ds-color-bg-surface);
  --ds-theme-footer-border: var(--ds-color-border);
  --ds-theme-footer-text: var(--ds-color-text-tertiary);
  --ds-theme-perf-card-background: var(--ds-color-bg-surface);
  --ds-theme-info-page-background: var(--ds-color-bg-canvas);
  --ds-theme-info-grid-image: none;
  --ds-theme-info-card-background: var(--ds-color-bg-surface);
  --ds-theme-info-card-shadow: var(--ds-shadow-md);
  --ds-theme-notice-text: var(--ds-color-text-secondary);
  --ds-theme-notice-background: var(--ds-color-bg-subtle);
  --ds-theme-list-background: var(--ds-color-bg-surface);
  --ds-theme-status-text: var(--ds-color-text-tertiary);
  --ds-theme-plan-page-background: var(--ds-color-bg-canvas);
  --ds-theme-plan-sidebar-background: var(--ds-color-bg-surface);
  --ds-theme-plan-topbar-background: var(--ds-color-bg-surface-strong);
  --ds-theme-plan-control-background: var(--ds-color-bg-surface);
  --ds-theme-plan-control-text: var(--ds-color-text-primary);
  --ds-theme-plan-nav-text: var(--ds-color-text-secondary);
  --ds-theme-plan-nav-active-background: var(--ds-color-bg-subtle);
  --ds-theme-plan-nav-active-text: var(--ds-color-text-primary);
  --ds-theme-plan-body-muted: var(--ds-color-text-secondary);
  --ds-theme-plan-table-background: var(--ds-color-bg-surface);
  --ds-theme-plan-heading-text: var(--ds-color-text-secondary);
  --ds-theme-plan-progress-background: var(--ds-color-bg-subtle);

  /* Typography */
  --ds-font-sans: "Geist", "Segoe UI", Arial, sans-serif;
  --ds-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --ds-font-size-xs: 0.75rem;
  --ds-font-size-sm: 0.875rem;
  --ds-font-size-md: 1rem;
  --ds-font-size-lg: 1.125rem;
  --ds-font-size-xl: 1.375rem;
  --ds-font-size-2xl: 1.75rem;
  --ds-font-size-3xl: 2.25rem;
  --ds-font-size-hero: clamp(2.6rem, 6vw, 5.6rem);
  --ds-line-tight: 1.05;
  --ds-line-body: 1.55;
  --ds-line-relaxed: 1.7;
  --ds-weight-regular: 400;
  --ds-weight-medium: 520;
  --ds-weight-semibold: 620;
  --ds-tracking-tight: -0.04em;
  --ds-tracking-label: 0.16em;

  /* Spacing */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-section-space: 4.375rem;
  --ds-container-gutter: 2rem;
  --ds-grid-columns: 12;
  --ds-grid-gap: 1.25rem;
  --ds-control-height: 2.75rem;
  --ds-component-density: 1;
  --ds-component-radius: var(--ds-radius-lg);

  /* Shape, border and elevation */
  --ds-radius-sm: 0.5rem;
  --ds-radius-md: 0.75rem;
  --ds-radius-lg: 1rem;
  --ds-radius-xl: 1.5rem;
  --ds-radius-2xl: 1.75rem;
  --ds-radius-pill: 999px;
  --ds-border-thin: 1px;
  --ds-shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.16);
  --ds-shadow-md: 0 20px 60px rgba(0, 0, 0, 0.24);
  --ds-shadow-lg: 0 32px 100px rgba(0, 0, 0, 0.32);

  /* Motion */
  --ds-duration-fast: 120ms;
  --ds-duration-normal: 180ms;
  --ds-duration-slow: 420ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layering */
  --ds-z-base: 0;
  --ds-z-raised: 10;
  --ds-z-sticky: 20;
  --ds-z-overlay: 40;
  --ds-z-modal: 60;
  --ds-z-toast: 80;

  /* Layout (breakpoint values are documented constants; media queries use them literally) */
  --ds-content-max: 1180px;
  --ds-content-wide-max: 1500px;
  --ds-breakpoint-mobile-max: 679px;
  --ds-breakpoint-tablet-min: 680px;
  --ds-breakpoint-small-desktop-min: 980px;
  --ds-breakpoint-desktop-min: 1280px;
  --ds-breakpoint-ultrawide-min: 1920px;
  --ds-responsive-mode: desktop;

  /* Backward-compatible aliases for the canonical UI */
  --background: var(--ds-color-bg-canvas);
  --section-background: var(--ds-color-bg-section);
  --foreground: var(--ds-color-text-primary);
  --muted: var(--ds-color-text-tertiary);
  --blue: var(--ds-color-accent-blue);
  --cyan: var(--ds-color-accent-cyan);
  --red: var(--ds-color-accent-red);
  --green: var(--ds-color-success);
  --amber: var(--ds-color-warning);
  --line: var(--ds-color-border);
  --bg: var(--ds-color-bg-canvas);
  --panel: var(--ds-color-bg-surface);
  --panel2: var(--ds-color-bg-subtle);
  --panel-strong: var(--ds-color-bg-surface-strong);
  --text: var(--ds-color-text-primary);
}

html[data-theme="light"] {
  color-scheme: light;
  --ds-color-bg-canvas: #f3f6fb;
  --ds-color-bg-section: #edf2f9;
  --ds-color-bg-surface: rgba(255, 255, 255, 0.9);
  --ds-color-bg-surface-strong: rgba(255, 255, 255, 0.97);
  --ds-color-bg-elevated: #ffffff;
  --ds-color-bg-subtle: rgba(32, 95, 211, 0.08);
  --ds-color-text-primary: #132039;
  --ds-color-text-secondary: #3e4c63;
  --ds-color-text-tertiary: #58677e;
  --ds-color-border: rgba(32, 74, 139, 0.2);
  --ds-color-border-strong: rgba(24, 72, 143, 0.4);
  --ds-color-accent-blue: #205fd3;
  --ds-color-accent-blue-strong: #174ca7;
  --ds-color-accent-cyan: #006b91;
  --ds-color-accent-red: #c62945;
  --ds-color-success: #087a52;
  --ds-color-warning: #925d00;
  --ds-color-focus: #135fc7;
  --ds-color-overlay: rgba(243, 247, 253, 0.9);
  --ds-theme-toggle-bg: rgba(255, 255, 255, 0.82);
  --ds-theme-brand-background: rgba(8, 18, 37, 0.9);
  --ds-theme-brand-border: rgba(32, 74, 139, 0.2);
  --ds-theme-page-background:
    radial-gradient(ellipse at 50% 100%, rgba(41, 103, 217, 0.13), transparent 38%),
    radial-gradient(circle at 84% 18%, rgba(45, 91, 178, 0.09), transparent 31%),
    var(--ds-color-bg-canvas);
  --ds-theme-hero-background:
    radial-gradient(circle at 73% 44%, rgba(45, 105, 210, 0.1), transparent 38%),
    linear-gradient(120deg, #f7f9fdeb 0%, #edf3fc9c 48%, #f4f7fc 100%);
  --ds-theme-grid-image:
    linear-gradient(rgba(35, 83, 158, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 83, 158, 0.08) 1px, transparent 1px);
  --ds-theme-aurora-opacity: 0.55;
  --ds-theme-nav-text: #34445e;
  --ds-theme-body-muted: #53627a;
  --ds-theme-card-border: rgba(38, 83, 153, 0.2);
  --ds-theme-card-background:
    radial-gradient(circle at 82% 18%, rgba(49, 104, 209, 0.1), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(229, 237, 249, 0.9));
  --ds-theme-card-shadow: 0 24px 70px rgba(35, 67, 119, 0.13);
  --ds-theme-dashboard-surface: rgba(255, 255, 255, 0.97);
  --ds-theme-dashboard-foreground: var(--ds-color-foreground-on-light);
  --ds-theme-dashboard-inset-surface: rgba(239, 246, 255, 0.96);
  --ds-theme-dashboard-inset-foreground: var(--ds-color-foreground-on-light);
  --ds-theme-dashboard-active-surface: rgba(224, 237, 255, 0.98);
  --ds-theme-dashboard-active-foreground: var(--ds-color-foreground-on-light);
  --ds-theme-media-surface: #07111f;
  --ds-theme-media-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-dashboard-muted: var(--ds-color-foreground-on-light-muted);
  --ds-theme-dashboard-border: rgba(32, 95, 211, 0.2);
  --ds-theme-dashboard-border-strong: rgba(32, 95, 211, 0.42);
  --ds-theme-dashboard-shadow: 0 26px 72px rgba(35, 67, 119, 0.16);
  --ds-theme-dashboard-accent-surface: #205fd3;
  --ds-theme-dashboard-accent-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-primary-action-surface: #205fd3;
  --ds-theme-primary-action-foreground: var(--ds-color-foreground-on-dark);
  --ds-theme-secondary-action-surface: rgba(255, 255, 255, 0.9);
  --ds-theme-secondary-action-foreground: var(--ds-color-foreground-on-light);
  --ds-theme-icon-surface: rgba(224, 237, 255, 0.98);
  --ds-theme-icon-foreground: var(--ds-color-foreground-on-light);
  --ds-theme-inset-border: rgba(35, 80, 148, 0.18);
  --ds-theme-inset-background: rgba(238, 244, 253, 0.88);
  --ds-theme-expert-background:
    radial-gradient(circle at 48% 38%, rgba(65, 118, 216, 0.2), transparent 43%),
    linear-gradient(150deg, #dfe9f8, #f7f9fd 78%);
  --ds-theme-control-border: rgba(35, 80, 148, 0.22);
  --ds-theme-control-background: rgba(255, 255, 255, 0.82);
  --ds-theme-footer-border: rgba(35, 80, 148, 0.16);
  --ds-theme-footer-text: #5c6980;
  --ds-theme-perf-card-background: linear-gradient(145deg, #ffffffeb, #e7eef9e8);
  --ds-theme-info-page-background:
    radial-gradient(circle at 16% 12%, rgba(67, 112, 207, 0.14), transparent 35rem),
    radial-gradient(circle at 88% 4%, rgba(207, 37, 69, 0.08), transparent 29rem),
    linear-gradient(155deg, #f7f9fd 0%, #eef3fa 48%, #f8f9fc 100%);
  --ds-theme-info-grid-image:
    linear-gradient(rgba(25, 64, 126, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 64, 126, 0.05) 1px, transparent 1px);
  --ds-theme-info-card-background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(230, 237, 248, 0.94));
  --ds-theme-info-card-shadow: 0 24px 70px rgba(37, 67, 112, 0.13);
  --ds-theme-notice-text: #36445b;
  --ds-theme-notice-background: rgba(198, 41, 69, 0.06);
  --ds-theme-list-background: rgba(255, 255, 255, 0.7);
  --ds-theme-status-text: #66738a;
  --ds-theme-plan-page-background:
    radial-gradient(circle at 78% 0%, rgba(41, 95, 194, 0.13), transparent 34%),
    radial-gradient(circle at 18% 75%, rgba(40, 95, 190, 0.08), transparent 36%),
    var(--ds-color-bg-canvas);
  --ds-theme-plan-sidebar-background: rgba(241, 246, 253, 0.92);
  --ds-theme-plan-topbar-background: rgba(246, 249, 253, 0.9);
  --ds-theme-plan-control-background: rgba(255, 255, 255, 0.88);
  --ds-theme-plan-control-text: #17243a;
  --ds-theme-plan-nav-text: #53627a;
  --ds-theme-plan-nav-active-background: rgba(32, 95, 211, 0.11);
  --ds-theme-plan-nav-active-text: #132039;
  --ds-theme-plan-body-muted: #5a6880;
  --ds-theme-plan-table-background: rgba(255, 255, 255, 0.78);
  --ds-theme-plan-heading-text: #52627b;
  --ds-theme-plan-progress-background: #d9e3f2;
  --ds-shadow-sm: 0 8px 28px rgba(17, 45, 91, 0.09);
  --ds-shadow-md: 0 20px 60px rgba(35, 67, 119, 0.13);
  --ds-shadow-lg: 0 32px 100px rgba(35, 67, 119, 0.17);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --ds-color-bg-canvas: #f3f6fb;
    --ds-color-bg-section: #edf2f9;
    --ds-color-bg-surface: rgba(255, 255, 255, 0.9);
    --ds-color-bg-surface-strong: rgba(255, 255, 255, 0.97);
    --ds-color-bg-elevated: #ffffff;
    --ds-color-bg-subtle: rgba(32, 95, 211, 0.08);
    --ds-color-text-primary: #132039;
    --ds-color-text-secondary: #3e4c63;
    --ds-color-text-tertiary: #58677e;
    --ds-color-border: rgba(32, 74, 139, 0.2);
    --ds-color-border-strong: rgba(24, 72, 143, 0.4);
    --ds-color-accent-blue: #205fd3;
    --ds-color-accent-blue-strong: #174ca7;
    --ds-color-accent-cyan: #006b91;
    --ds-color-accent-red: #c62945;
    --ds-color-success: #087a52;
    --ds-color-warning: #925d00;
    --ds-color-focus: #135fc7;
    --ds-color-overlay: rgba(243, 247, 253, 0.9);
    --ds-shadow-sm: 0 8px 28px rgba(17, 45, 91, 0.09);
    --ds-shadow-md: 0 20px 60px rgba(35, 67, 119, 0.13);
    --ds-shadow-lg: 0 32px 100px rgba(35, 67, 119, 0.17);
  }
}

@media (max-width: 679px) {
  :root {
    --ds-responsive-mode: mobile;
    --ds-section-space: 2.75rem;
    --ds-container-gutter: 1.0625rem;
    --ds-content-max: 100%;
    --ds-grid-columns: 1;
    --ds-grid-gap: 0.875rem;
    --ds-control-height: 2.75rem;
    --ds-component-density: 0.86;
    --ds-component-radius: var(--ds-radius-md);
    --ds-font-size-3xl: 2rem;
  }
}

@media (min-width: 680px) and (max-width: 979px) {
  :root {
    --ds-responsive-mode: tablet;
    --ds-section-space: 3.5rem;
    --ds-container-gutter: 1.5rem;
    --ds-content-max: 920px;
    --ds-grid-columns: 8;
    --ds-grid-gap: 1rem;
    --ds-control-height: 2.75rem;
    --ds-component-density: 0.92;
    --ds-component-radius: var(--ds-radius-lg);
  }
}

@media (min-width: 980px) and (max-width: 1279px) {
  :root {
    --ds-responsive-mode: small-desktop;
    --ds-section-space: 3.75rem;
    --ds-container-gutter: 1.75rem;
    --ds-content-max: 1120px;
    --ds-grid-columns: 12;
    --ds-grid-gap: 1rem;
    --ds-control-height: 2.625rem;
    --ds-component-density: 0.94;
    --ds-component-radius: var(--ds-radius-lg);
  }
}

@media (min-width: 1280px) and (max-width: 1919px) {
  :root {
    --ds-responsive-mode: desktop;
    --ds-section-space: 4.375rem;
    --ds-container-gutter: 2rem;
    --ds-content-max: 1280px;
    --ds-grid-columns: 12;
    --ds-grid-gap: 1.25rem;
    --ds-control-height: 2.75rem;
    --ds-component-density: 1;
    --ds-component-radius: var(--ds-radius-lg);
  }
}

@media (min-width: 1920px) {
  :root {
    --ds-responsive-mode: ultrawide;
    --ds-section-space: 5rem;
    --ds-container-gutter: 3rem;
    --ds-content-max: 1500px;
    --ds-grid-columns: 12;
    --ds-grid-gap: 1.5rem;
    --ds-control-height: 2.875rem;
    --ds-component-density: 1.04;
    --ds-component-radius: var(--ds-radius-xl);
    --ds-font-size-hero: clamp(3.25rem, 4.8vw, 6.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0.01ms;
    --ds-duration-normal: 0.01ms;
    --ds-duration-slow: 0.01ms;
  }
}