/* ob-design-bundle:start */
/*
 * OceanBase console design tokens and layout primitives.
 * Public API: --ob-* custom properties and .ob-* classes (see design.md).
 * Portable foundation for reuse — no component-library dependency.
 *
 * Light tokens: :where(.ob-console), :where(:root)
 * Dark tokens:  :where(:root[data-theme="dark"]), :where(:root[data-theme="dark"] .ob-console)
 * Do not invent, alias, or redeclare --ob-* names outside this file.
 * Page-owned CSS may only read the public token families listed in design.md.
 */

:where(.ob-console),
:where(:root) {
  color-scheme: light;

  /* ——— Primitives: base ——— */
  --ob-black: #000000;
  --ob-white: #ffffff;

  /* ——— Primitives: gray ——— */
  --ob-gray-10: #132039;
  --ob-gray-9: #3b4a69;
  --ob-gray-8: #5c6b8a;
  --ob-gray-7: #8592ad;
  --ob-gray-6: #b6c0d4;
  --ob-gray-5: #cdd5e4;
  --ob-gray-4: #e2e8f3;
  --ob-gray-3: #ebeff7;
  --ob-gray-2: #f5f7fc;
  --ob-gray-1: #fbfcfe;

  /* ——— Primitives: blue ——— */
  --ob-blue-6: #0d3c80;
  --ob-blue-5: #0852bb;
  --ob-blue-4: #0d6cf2;
  --ob-blue-3: #619ef3;
  --ob-blue-2: #b3d3ff;
  --ob-blue-1: #f3f8fe;

  /* ——— Primitives: green ——— */
  --ob-green-6: #09593f;
  --ob-green-5: #0a8c61;
  --ob-green-4: #16b882;
  --ob-green-3: #79d1b4;
  --ob-green-2: #b3e6d5;
  --ob-green-1: #f5faf8;

  /* ——— Primitives: orange ——— */
  --ob-orange-6: #6c4408;
  --ob-orange-5: #ac690b;
  --ob-orange-4: #f49f25;
  --ob-orange-3: #f7ca88;
  --ob-orange-2: #ffe7c2;
  --ob-orange-1: #fff9ee;

  /* ——— Primitives: red ——— */
  --ob-red-6: #8a1b1b;
  --ob-red-5: #b52727;
  --ob-red-4: #eb4242;
  --ob-red-3: #f69898;
  --ob-red-2: #ffd6d6;
  --ob-red-1: #fff2f2;

  /* ——— Primitives: fuchsia ——— */
  --ob-fuchsia-6: #580e67;
  --ob-fuchsia-5: #802792;
  --ob-fuchsia-4: #b04ec4;
  --ob-fuchsia-3: #d88ee7;
  --ob-fuchsia-2: #e8caee;
  --ob-fuchsia-1: #faf0fc;

  /* ——— Semantics: background ——— */
  --ob-color-bg-default: var(--ob-white);
  --ob-color-bg-primary: var(--ob-gray-1);
  --ob-color-bg-secondary: var(--ob-gray-2);
  --ob-color-bg-hover: var(--ob-gray-2);
  --ob-color-bg-hover-secondary: var(--ob-gray-3);
  --ob-color-bg-focus: var(--ob-gray-3);
  --ob-color-bg-selected: var(--ob-blue-4);
  --ob-color-bg-disabled: var(--ob-gray-2);
  --ob-color-bg-info: var(--ob-blue-1);
  --ob-color-bg-success: var(--ob-green-1);
  --ob-color-bg-warning: var(--ob-orange-1);
  --ob-color-bg-error: var(--ob-red-1);

  /* ——— Semantics: border ——— */
  --ob-color-divider: var(--ob-gray-4);
  --ob-color-border-default: var(--ob-gray-5);
  --ob-color-border-container: var(--ob-gray-4);
  --ob-color-border-inverse: var(--ob-white);
  --ob-color-border-hover: var(--ob-gray-7);
  --ob-color-border-selected: var(--ob-blue-4);
  --ob-color-border-focus: var(--ob-blue-4);
  --ob-color-border-success: var(--ob-green-4);
  --ob-color-border-warning: var(--ob-orange-4);
  --ob-color-border-error: var(--ob-red-4);

  /* ——— Semantics: text ——— */
  --ob-color-text-default: var(--ob-gray-10);
  --ob-color-text-navigation: var(--ob-gray-9);
  --ob-color-text-label: var(--ob-gray-8);
  --ob-color-text-description: var(--ob-gray-7);
  --ob-color-text-link: var(--ob-blue-4);
  --ob-color-text-disabled: var(--ob-gray-6);
  --ob-color-text-focus: var(--ob-gray-10);
  --ob-color-text-selected: var(--ob-blue-4);
  --ob-color-text-disabled-selected: var(--ob-gray-7);
  --ob-color-text-inverse: var(--ob-white);
  --ob-color-text-success: var(--ob-green-4);
  --ob-color-text-error: var(--ob-red-4);
  --ob-color-text-warning: var(--ob-orange-4);

  /* ——— Semantics: icon ——— */
  --ob-color-icon-default: var(--ob-gray-8);
  --ob-color-icon-hover: var(--ob-blue-4);
  --ob-color-icon-disabled: var(--ob-gray-6);
  --ob-color-icon-focus: var(--ob-blue-4);
  --ob-color-icon-inverse: var(--ob-white);
  --ob-color-icon-info: var(--ob-blue-4);
  --ob-color-icon-success: var(--ob-green-4);
  --ob-color-icon-warning: var(--ob-orange-4);
  --ob-color-icon-error: var(--ob-red-4);
  --ob-color-icon-critical: var(--ob-fuchsia-4);

  /* ——— Navigation surfaces ——— */
  --ob-navi-color-bg: var(--ob-gray-2);
  --ob-navi-color-bg-hover: var(--ob-gray-3);
  --ob-navi-color-bg-focus: var(--ob-blue-1);

  /* ——— Typography: family / weight / size / leading ——— */
  --ob-font-family-default: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ob-font-family-code: Monaco, "SFMono-Regular", Consolas, "Liberation Mono",
    Menlo, monospace;

  --ob-font-weight-sm: 400;
  --ob-font-weight-md: 500;
  --ob-font-weight-lg: 600;

  --ob-font-size-300: 12px;
  --ob-font-size-325: 14px;
  --ob-font-size-400: 16px;
  --ob-font-size-450: 18px;
  --ob-font-size-500: 20px;

  --ob-line-height-500: 20px;
  --ob-line-height-600: 24px;
  --ob-line-height-650: 26px;
  --ob-line-height-700: 28px;

  /* ——— Typography: composite roles (prefer these) ——— */
  --ob-font-h1-family: var(--ob-font-family-default);
  --ob-font-h1-weight: var(--ob-font-weight-lg);
  --ob-font-h1-size: var(--ob-font-size-500);
  --ob-font-h1-line-height: var(--ob-line-height-700);

  --ob-font-h2-family: var(--ob-font-family-default);
  --ob-font-h2-weight: var(--ob-font-weight-lg);
  --ob-font-h2-size: var(--ob-font-size-450);
  --ob-font-h2-line-height: var(--ob-line-height-650);

  --ob-font-h3-family: var(--ob-font-family-default);
  --ob-font-h3-weight: var(--ob-font-weight-lg);
  --ob-font-h3-size: var(--ob-font-size-400);
  --ob-font-h3-line-height: var(--ob-line-height-600);

  --ob-font-h4-family: var(--ob-font-family-default);
  --ob-font-h4-weight: var(--ob-font-weight-lg);
  --ob-font-h4-size: var(--ob-font-size-325);
  --ob-font-h4-line-height: var(--ob-line-height-500);

  --ob-font-body1-family: var(--ob-font-family-default);
  --ob-font-body1-weight: var(--ob-font-weight-md);
  --ob-font-body1-size: var(--ob-font-size-325);
  --ob-font-body1-line-height: var(--ob-line-height-500);

  --ob-font-body2-family: var(--ob-font-family-default);
  --ob-font-body2-weight: var(--ob-font-weight-sm);
  --ob-font-body2-size: var(--ob-font-size-300);
  --ob-font-body2-line-height: var(--ob-line-height-500);

  --ob-font-body-code-family: var(--ob-font-family-code);
  --ob-font-body-code-weight: var(--ob-font-weight-md);
  --ob-font-body-code-size: var(--ob-font-size-325);
  --ob-font-body-code-line-height: var(--ob-line-height-500);

  --ob-font-caption-family: var(--ob-font-family-default);
  --ob-font-caption-weight: var(--ob-font-weight-sm);
  --ob-font-caption-size: var(--ob-font-size-300);
  --ob-font-caption-line-height: var(--ob-line-height-500);

  /* ——— Spacing (4px base) ——— */
  --ob-space-50: 2px;
  --ob-space-100: 4px;
  --ob-space-150: 6px;
  --ob-space-200: 8px;
  --ob-space-300: 12px;
  --ob-space-400: 16px;
  --ob-space-500: 20px;
  --ob-space-600: 24px;
  --ob-space-800: 32px;
  --ob-space-negative-25: -1px;

  /* ——— Radius ——— */
  --ob-radius-sm: 4px;
  --ob-radius-md: 6px;
  --ob-radius-lg: 8px;

  /* ——— Shadow ——— */
  --ob-shadow-1-top: 0 -2px 8px 0 rgba(19, 32, 57, 0.08);
  --ob-shadow-1-bottom: 0 2px 8px 0 rgba(19, 32, 57, 0.08);
  --ob-shadow-1-left: -2px 0 8px 0 rgba(19, 32, 57, 0.08);
  --ob-shadow-1-right: 2px 0 8px 0 rgba(19, 32, 57, 0.08);
  --ob-shadow-2: 0 4px 16px 0 rgba(19, 32, 57, 0.12);

  /* ——— Layout constants ——— */
  --ob-layout-header-height: 48px;
  --ob-layout-sidebar-collapsed-width: 48px;
  --ob-layout-sub-sidebar-width: 156px;
  --ob-layout-content-min-width: 1024px;
  --ob-layout-content-max-width: 1920px;
  --ob-layout-logo-collapsed-size: 22px;
}

/*
 * Dark theme: remap semantic / navi / shadow tokens only.
 * Surfaces & neutrals follow Vercel / Geist dark (near-black).
 * Brand / status accents stay vivid (Geist blue / red / amber / green).
 * Apply on :root AND .ob-console so body-level .ob-console light
 * declarations do not clobber inherited dark values.
 * Activate with data-theme="dark" on :root (html).
 */
:where(:root[data-theme="dark"]),
:where(:root[data-theme="dark"] .ob-console) {
  color-scheme: dark;

  /* ——— Semantics: background (Geist backgrounds + gray 100–300) ——— */
  --ob-color-bg-default: #111111;
  --ob-color-bg-primary: #0a0a0a;
  --ob-color-bg-secondary: #171717;
  --ob-color-bg-hover: #1f1f1f;
  --ob-color-bg-hover-secondary: #292929;
  --ob-color-bg-focus: #292929;
  --ob-color-bg-selected: #0070f3;
  --ob-color-bg-disabled: #171717;
  --ob-color-bg-info: #0b1f33;
  --ob-color-bg-success: #0f2318;
  --ob-color-bg-warning: #2a1f0a;
  --ob-color-bg-error: #2a1215;

  /* ——— Semantics: border (Geist gray 400–600) ——— */
  --ob-color-divider: #2e2e2e;
  --ob-color-border-default: #3b3b3b;
  --ob-color-border-container: #2e2e2e;
  --ob-color-border-inverse: #0a0a0a;
  --ob-color-border-hover: #525252;
  --ob-color-border-selected: #0070f3;
  --ob-color-border-focus: #0070f3;
  --ob-color-border-success: #46a758;
  --ob-color-border-warning: #ffb224;
  --ob-color-border-error: #e5484d;

  /* ——— Semantics: text (Geist gray 900–1000) ——— */
  --ob-color-text-default: #ededed;
  --ob-color-text-navigation: #ededed;
  --ob-color-text-label: #a1a1a1;
  --ob-color-text-description: #8f8f8f;
  --ob-color-text-link: #52a8ff;
  --ob-color-text-disabled: #666666;
  --ob-color-text-focus: #ededed;
  --ob-color-text-selected: #52a8ff;
  --ob-color-text-disabled-selected: #8f8f8f;
  --ob-color-text-inverse: #0a0a0a;
  --ob-color-text-success: #46a758;
  --ob-color-text-error: #e5484d;
  --ob-color-text-warning: #ffb224;

  /* ——— Semantics: icon ——— */
  --ob-color-icon-default: #a1a1a1;
  --ob-color-icon-hover: #52a8ff;
  --ob-color-icon-disabled: #666666;
  --ob-color-icon-focus: #52a8ff;
  --ob-color-icon-inverse: #0a0a0a;
  --ob-color-icon-info: #52a8ff;
  --ob-color-icon-success: #46a758;
  --ob-color-icon-warning: #ffb224;
  --ob-color-icon-error: #e5484d;
  --ob-color-icon-critical: #f472b6;

  /* ——— Navigation surfaces ——— */
  --ob-navi-color-bg: #0a0a0a;
  --ob-navi-color-bg-hover: #1f1f1f;
  --ob-navi-color-bg-focus: color-mix(in srgb, #0070f3 18%, #0a0a0a);

  /* ——— Shadow ——— */
  --ob-shadow-1-top: 0 -2px 8px 0 color-mix(in srgb, #000000 55%, transparent);
  --ob-shadow-1-bottom: 0 2px 8px 0 color-mix(in srgb, #000000 55%, transparent);
  --ob-shadow-1-left: -2px 0 8px 0 color-mix(in srgb, #000000 55%, transparent);
  --ob-shadow-1-right: 2px 0 8px 0 color-mix(in srgb, #000000 55%, transparent);
  --ob-shadow-2: 0 4px 16px 0 color-mix(in srgb, #000000 65%, transparent);
}

/* ——— Page canvas ——— */

.ob-console {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0;
  background-color: var(--ob-color-bg-primary);
  color: var(--ob-color-text-default);
  font-family: var(--ob-font-family-default);
  font-size: var(--ob-font-size-325);
  font-weight: var(--ob-font-weight-sm);
  line-height: var(--ob-line-height-500);
}

.ob-console *,
.ob-console *::before,
.ob-console *::after {
  box-sizing: border-box;
}

/* ——— Type roles ——— */

.ob-font-h1 {
  margin: 0;
  font-family: var(--ob-font-h1-family);
  font-size: var(--ob-font-h1-size);
  font-weight: var(--ob-font-h1-weight);
  line-height: var(--ob-font-h1-line-height);
  color: var(--ob-color-text-default);
}

.ob-font-h2 {
  margin: 0;
  font-family: var(--ob-font-h2-family);
  font-size: var(--ob-font-h2-size);
  font-weight: var(--ob-font-h2-weight);
  line-height: var(--ob-font-h2-line-height);
  color: var(--ob-color-text-default);
}

.ob-font-h3 {
  margin: 0;
  font-family: var(--ob-font-h3-family);
  font-size: var(--ob-font-h3-size);
  font-weight: var(--ob-font-h3-weight);
  line-height: var(--ob-font-h3-line-height);
  color: var(--ob-color-text-default);
}

.ob-font-h4 {
  margin: 0;
  font-family: var(--ob-font-h4-family);
  font-size: var(--ob-font-h4-size);
  font-weight: var(--ob-font-h4-weight);
  line-height: var(--ob-font-h4-line-height);
  color: var(--ob-color-text-default);
}

.ob-font-body1 {
  margin: 0;
  font-family: var(--ob-font-body1-family);
  font-size: var(--ob-font-body1-size);
  font-weight: var(--ob-font-body1-weight);
  line-height: var(--ob-font-body1-line-height);
  color: var(--ob-color-text-default);
}

.ob-font-body2 {
  margin: 0;
  font-family: var(--ob-font-body2-family);
  font-size: var(--ob-font-body2-size);
  font-weight: var(--ob-font-body2-weight);
  line-height: var(--ob-font-body2-line-height);
  color: var(--ob-color-text-default);
}

.ob-font-code {
  margin: 0;
  font-family: var(--ob-font-body-code-family);
  font-size: var(--ob-font-body-code-size);
  font-weight: var(--ob-font-body-code-weight);
  line-height: var(--ob-font-body-code-line-height);
  color: var(--ob-color-text-default);
}

.ob-font-caption {
  margin: 0;
  font-family: var(--ob-font-caption-family);
  font-size: var(--ob-font-caption-size);
  font-weight: var(--ob-font-caption-weight);
  line-height: var(--ob-font-caption-line-height);
  color: var(--ob-color-text-description);
}

.ob-font-label {
  margin: 0;
  font-family: var(--ob-font-body1-family);
  font-size: var(--ob-font-body1-size);
  font-weight: var(--ob-font-weight-sm);
  line-height: var(--ob-font-body1-line-height);
  color: var(--ob-color-text-label);
}

/* ——— Surfaces ——— */

.ob-surface {
  background-color: var(--ob-color-bg-default);
  border: 1px solid var(--ob-color-border-container);
  border-radius: var(--ob-radius-lg);
}

.ob-surface-nested {
  background-color: var(--ob-color-bg-secondary);
  border-radius: var(--ob-radius-sm);
}

.ob-divider {
  border: 0;
  border-top: 1px solid var(--ob-color-divider);
  margin: var(--ob-space-400) 0;
}

/* ——— Layout primitives ——— */

.ob-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--ob-color-bg-primary);
}

.ob-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  height: var(--ob-layout-header-height);
  background-color: var(--ob-color-bg-default);
  border-bottom: 1px solid var(--ob-color-divider);
}

.ob-main-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  width: var(--sider-width, 200px);
  background-color: var(--ob-navi-color-bg);
  box-shadow: var(--ob-shadow-1-right);
}

.ob-main-sidebar[data-collapsed="true"] {
  width: var(--ob-layout-sidebar-collapsed-width);
}

.ob-sub-sidebar {
  position: fixed;
  top: var(--ob-layout-header-height);
  bottom: 0;
  z-index: 80;
  width: var(--ob-layout-sub-sidebar-width);
  background-color: var(--ob-color-bg-primary);
  border-right: 1px solid var(--ob-color-divider);
}

.ob-page {
  flex: 1;
  min-width: 0;
  padding-top: var(--ob-layout-header-height);
  background-color: var(--ob-color-bg-primary);
}

.ob-page-column {
  width: 100%;
  min-width: var(--ob-layout-content-min-width);
  max-width: var(--ob-layout-content-max-width);
  margin-inline: auto;
  padding: var(--ob-space-600) var(--ob-space-800);
}

.ob-page-column > * + * {
  margin-top: var(--ob-space-400);
}

.ob-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ob-space-400);
}

.ob-stack-tight {
  display: flex;
  flex-direction: column;
  gap: var(--ob-space-300);
}

.ob-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ob-space-200);
}

.ob-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ob-space-800);
  min-width: 0;
}

.ob-toolbar-start {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--ob-space-200);
  min-width: 0;
}

.ob-toolbar-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--ob-space-200);
  white-space: nowrap;
}

.ob-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ob-space-300);
}

.ob-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ob-space-300);
}

.ob-card-table-body {
  padding: 0;
}

.ob-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1280px) {
  .ob-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .ob-grid-4,
  .ob-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ob-page-column {
    min-width: 0;
    padding: var(--ob-space-400) var(--ob-space-600);
  }
}

/* ob-design-bundle:end */