@stratum-hq/react 0.2.1 → 0.2.2

package/dist/styles/default.css

@@ -0,0 +1,1143 @@
+/* Stratum Design System — @stratum-hq/react-ui */
+
+/* ============================================================
+   Font Imports
+   ============================================================ */
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wdth,wght@0,75..100,400..700;1,75..100,400..700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* ============================================================
+   Design Tokens — Dark Mode (Primary / Default)
+   ============================================================ */
+:root {
+  /* --- Surfaces — deep earth, not pure black --- */
+  --surface-0: #0F0E0C;
+  --surface-1: #1A1815;
+  --surface-2: #252220;
+  --surface-3: #302D2A;
+
+  /* --- Text --- */
+  --text-primary: #E8E2D9;
+  --text-secondary: #A39E95;
+  --text-tertiary: #6B6560;
+
+  /* --- Accent — terracotta (used sparingly) --- */
+  --accent: #C05746;
+  --accent-hover: #D4654E;
+  --accent-muted: #C0574620;
+
+  /* --- Warm neutrals — sandstone --- */
+  --sandstone: #C4A882;
+  --sandstone-muted: #C4A88240;
+
+  /* --- Semantic --- */
+  --success: #5B8C5A;
+  --success-bg: #1A2E19;
+  --warning: #C4A244;
+  --warning-bg: #2E2610;
+  --error: #C05746;
+  --error-bg: #2E1410;
+  --info: #7A8B9A;
+  --info-bg: #1A2430;
+
+  /* --- Borders --- */
+  --border: #2A2725;
+  --border-hover: #3D3935;
+
+  /* --- Code --- */
+  --code-bg: #161412;
+  --code-text: #C4A882;
+
+  /* --- Legacy aliases (component compatibility) --- */
+  --color-primary: var(--accent);
+  --color-primary-hover: var(--accent-hover);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-light: var(--accent-muted);
+  --color-accent-muted: var(--accent-muted);
+
+  --color-success: var(--success);
+  --color-success-bg: var(--success-bg);
+  --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-error: var(--error);
+  --color-error-bg: var(--error-bg);
+  --color-info: var(--info);
+  --color-info-bg: var(--info-bg);
+
+  --color-bg-page: var(--surface-0);
+  --color-bg-surface: var(--surface-1);
+  --color-bg-elevated: var(--surface-2);
+  --color-bg-hover: var(--surface-2);
+  --color-bg-active: var(--surface-3);
+  --color-bg-sidebar: var(--surface-0);
+  --color-bg-sidebar-hover: var(--surface-1);
+
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-disabled: var(--text-tertiary);
+  --color-text-on-primary: #E8E2D9;
+  --color-text-active: var(--accent-hover);
+
+  --color-border-default: var(--border);
+  --color-border-strong: var(--border-hover);
+  --color-border-input: var(--border-hover);
+
+  /* --- Badge: Inherited — sandstone --- */
+  --color-badge-inherited-bg: var(--sandstone-muted);
+  --color-badge-inherited-text: var(--sandstone);
+
+  /* --- Badge: Locked — warning amber --- */
+  --color-badge-locked-bg: var(--warning-bg);
+  --color-badge-locked-text: var(--warning);
+
+  /* --- Badge: Own --- */
+  --color-badge-own-bg: var(--surface-2);
+  --color-badge-own-text: var(--text-secondary);
+
+  /* --- Badge: Delegated --- */
+  --color-badge-delegated-bg: var(--success-bg);
+  --color-badge-delegated-text: var(--success);
+
+  /* --- Typography --- */
+  --font-display: "Instrument Sans", system-ui, sans-serif;
+  --font-body: "Instrument Sans", system-ui, sans-serif;
+  --font-code: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+
+  --font-size-xs: 0.6875rem;   /* 11px */
+  --font-size-sm: 0.75rem;     /* 12px */
+  --font-size-base: 0.8125rem; /* 13px */
+  --font-size-md: 0.875rem;    /* 14px */
+  --font-size-lg: 1rem;        /* 16px */
+  --font-size-xl: 1.25rem;     /* 20px */
+  --font-size-2xl: 1.5rem;     /* 24px */
+  --font-size-3xl: 2rem;       /* 32px */
+  --font-size-4xl: 2.5rem;     /* 40px */
+
+  /* --- Spacing — 8px base scale --- */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-24: 96px;
+  --space-32: 128px;
+
+  /* Legacy spacing aliases */
+  --space-2xs: 2px;
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-3);
+  --space-lg: var(--space-4);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-8);
+  --space-3xl: var(--space-12);
+  --space-4xl: var(--space-16);
+
+  /* --- Border Radius — hierarchy, not uniform --- */
+  --radius-sm: 4px;    /* buttons, inputs, tags */
+  --radius-md: 8px;    /* cards, containers */
+  --radius-lg: 12px;   /* modals, large surfaces */
+  --radius-full: 9999px;
+
+  /* --- Shadows — warm-toned --- */
+  --shadow-sm: 0 1px 2px rgba(15, 14, 12, 0.4);
+  --shadow-md: 0 2px 8px rgba(15, 14, 12, 0.5), 0 1px 2px rgba(15, 14, 12, 0.3);
+  --shadow-lg: 0 4px 16px rgba(15, 14, 12, 0.6), 0 2px 4px rgba(15, 14, 12, 0.3);
+  --shadow-xl: 0 8px 32px rgba(15, 14, 12, 0.7), 0 4px 8px rgba(15, 14, 12, 0.4);
+
+  /* --- Motion --- */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
+  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+
+  /* Legacy motion aliases */
+  --duration-micro: var(--duration-fast);
+  --duration-short: var(--duration-fast);
+  --duration-medium: var(--duration-normal);
+  --duration-long: var(--duration-slow);
+  --ease-enter: var(--ease-out);
+  --ease-exit: var(--ease-in);
+  --ease-move: var(--ease-in-out);
+}
+
+/* ============================================================
+   Light Mode — for docs only
+   ============================================================ */
+[data-theme="light"] {
+  --surface-0: #FAF8F5;
+  --surface-1: #F0EDE8;
+  --surface-2: #E5E0DA;
+  --surface-3: #D6D0C8;
+
+  --text-primary: #1A1815;
+  --text-secondary: #5C5650;
+  --text-tertiary: #8A847D;
+
+  --accent: #A84535;
+  --accent-hover: #C05746;
+  --accent-muted: #A8453520;
+
+  --sandstone: #8B6F4E;
+  --sandstone-muted: #8B6F4E20;
+
+  --success: #3D6B3C;
+  --success-bg: #D8EDCC;
+  --warning: #8B6E10;
+  --warning-bg: #F5E8C0;
+  --error: #A84535;
+  --error-bg: #F5D5CC;
+  --info: #4A5D6E;
+  --info-bg: #D8E4EC;
+
+  --border: #D6D0C8;
+  --border-hover: #C4BDB4;
+
+  --code-bg: #F0EDE8;
+  --code-text: #8B6F4E;
+
+  /* --- Legacy aliases (light) --- */
+  --color-primary: var(--accent);
+  --color-primary-hover: var(--accent-hover);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-light: var(--accent-muted);
+  --color-accent-muted: var(--accent-muted);
+
+  --color-success: var(--success);
+  --color-success-bg: var(--success-bg);
+  --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-error: var(--error);
+  --color-error-bg: var(--error-bg);
+  --color-info: var(--info);
+  --color-info-bg: var(--info-bg);
+
+  --color-bg-page: var(--surface-0);
+  --color-bg-surface: var(--surface-1);
+  --color-bg-elevated: var(--surface-2);
+  --color-bg-hover: var(--surface-2);
+  --color-bg-active: var(--surface-3);
+  --color-bg-sidebar: var(--surface-0);
+  --color-bg-sidebar-hover: var(--surface-1);
+
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-disabled: var(--text-tertiary);
+  --color-text-on-primary: #FAF8F5;
+  --color-text-active: var(--accent);
+
+  --color-border-default: var(--border);
+  --color-border-strong: var(--border-hover);
+  --color-border-input: var(--border-hover);
+
+  --color-badge-inherited-bg: var(--sandstone-muted);
+  --color-badge-inherited-text: var(--sandstone);
+
+  --color-badge-locked-bg: var(--warning-bg);
+  --color-badge-locked-text: var(--warning);
+
+  --color-badge-own-bg: var(--surface-2);
+  --color-badge-own-text: var(--text-secondary);
+
+  --color-badge-delegated-bg: var(--success-bg);
+  --color-badge-delegated-text: var(--success);
+
+  --shadow-sm: 0 1px 2px rgba(26, 24, 21, 0.06);
+  --shadow-md: 0 2px 8px rgba(26, 24, 21, 0.09), 0 1px 2px rgba(26, 24, 21, 0.05);
+  --shadow-lg: 0 4px 16px rgba(26, 24, 21, 0.12), 0 2px 4px rgba(26, 24, 21, 0.06);
+  --shadow-xl: 0 8px 32px rgba(26, 24, 21, 0.14), 0 4px 8px rgba(26, 24, 21, 0.07);
+}
+
+/* ============================================================
+   Dark Mode — Auto-detect (when no data-theme is set, prefer dark)
+   ============================================================ */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    --surface-0: #FAF8F5;
+    --surface-1: #F0EDE8;
+    --surface-2: #E5E0DA;
+    --surface-3: #D6D0C8;
+
+    --text-primary: #1A1815;
+    --text-secondary: #5C5650;
+    --text-tertiary: #8A847D;
+
+    --accent: #A84535;
+    --accent-hover: #C05746;
+    --accent-muted: #A8453520;
+
+    --sandstone: #8B6F4E;
+    --sandstone-muted: #8B6F4E20;
+
+    --success: #3D6B3C;
+    --success-bg: #D8EDCC;
+    --warning: #8B6E10;
+    --warning-bg: #F5E8C0;
+    --error: #A84535;
+    --error-bg: #F5D5CC;
+    --info: #4A5D6E;
+    --info-bg: #D8E4EC;
+
+    --border: #D6D0C8;
+    --border-hover: #C4BDB4;
+
+    --code-bg: #F0EDE8;
+    --code-text: #8B6F4E;
+
+    --color-primary: var(--accent);
+    --color-primary-hover: var(--accent-hover);
+    --color-accent: var(--accent);
+    --color-accent-hover: var(--accent-hover);
+    --color-accent-light: var(--accent-muted);
+    --color-accent-muted: var(--accent-muted);
+
+    --color-success: var(--success);
+    --color-success-bg: var(--success-bg);
+    --color-warning: var(--warning);
+    --color-warning-bg: var(--warning-bg);
+    --color-error: var(--error);
+    --color-error-bg: var(--error-bg);
+    --color-info: var(--info);
+    --color-info-bg: var(--info-bg);
+
+    --color-bg-page: var(--surface-0);
+    --color-bg-surface: var(--surface-1);
+    --color-bg-elevated: var(--surface-2);
+    --color-bg-hover: var(--surface-2);
+    --color-bg-active: var(--surface-3);
+    --color-bg-sidebar: var(--surface-0);
+    --color-bg-sidebar-hover: var(--surface-1);
+
+    --color-text-primary: var(--text-primary);
+    --color-text-secondary: var(--text-secondary);
+    --color-text-tertiary: var(--text-tertiary);
+    --color-text-disabled: var(--text-tertiary);
+    --color-text-on-primary: #FAF8F5;
+    --color-text-active: var(--accent);
+
+    --color-border-default: var(--border);
+    --color-border-strong: var(--border-hover);
+    --color-border-input: var(--border-hover);
+
+    --color-badge-inherited-bg: var(--sandstone-muted);
+    --color-badge-inherited-text: var(--sandstone);
+
+    --color-badge-locked-bg: var(--warning-bg);
+    --color-badge-locked-text: var(--warning);
+
+    --color-badge-own-bg: var(--surface-2);
+    --color-badge-own-text: var(--text-secondary);
+
+    --color-badge-delegated-bg: var(--success-bg);
+    --color-badge-delegated-text: var(--success);
+
+    --shadow-sm: 0 1px 2px rgba(26, 24, 21, 0.06);
+    --shadow-md: 0 2px 8px rgba(26, 24, 21, 0.09), 0 1px 2px rgba(26, 24, 21, 0.05);
+    --shadow-lg: 0 4px 16px rgba(26, 24, 21, 0.12), 0 2px 4px rgba(26, 24, 21, 0.06);
+    --shadow-xl: 0 8px 32px rgba(26, 24, 21, 0.14), 0 4px 8px rgba(26, 24, 21, 0.07);
+  }
+}
+
+/* ============================================================
+   Accessibility — Focus Visible
+   ============================================================ */
+.stratum-tenant-switcher button:focus-visible,
+.stratum-tenant-switcher input:focus-visible,
+.stratum-tenant-switcher [tabindex]:focus-visible,
+.stratum-tree button:focus-visible,
+.stratum-tree [tabindex]:focus-visible,
+.stratum-config-editor button:focus-visible,
+.stratum-config-editor input:focus-visible,
+.stratum-permission-editor button:focus-visible,
+.stratum-permission-editor input:focus-visible,
+.stratum-permission-editor select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+/* ============================================================
+   Accessibility — Reduced Motion
+   ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ============================================================
+   Tenant Switcher
+   ============================================================ */
+.stratum-tenant-switcher {
+  position: relative;
+  display: inline-block;
+  font-family: var(--font-body);
+}
+
+.stratum-tenant-switcher__trigger {
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--color-border-input);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+  min-width: 200px;
+  text-align: start;
+  transition: border-color var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.stratum-tenant-switcher__trigger:hover {
+  border-color: var(--color-border-strong);
+}
+
+.stratum-tenant-switcher__dropdown {
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  margin-top: var(--space-xs);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-surface);
+  box-shadow: var(--shadow-md);
+  z-index: 50;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.stratum-tenant-switcher__search {
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  border: none;
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.stratum-tenant-switcher__search::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.stratum-tenant-switcher__list {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-xs) 0;
+}
+
+.stratum-tenant-switcher__item {
+  padding: var(--space-sm) var(--space-md);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-tenant-switcher__item:hover {
+  background: var(--color-bg-hover);
+}
+
+.stratum-tenant-switcher__item--active {
+  background: var(--color-bg-active);
+  color: var(--color-text-active);
+}
+
+.stratum-tenant-switcher__slug {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+/* ============================================================
+   Tenant Tree
+   ============================================================ */
+.stratum-tree {
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+}
+
+.stratum-tree__root {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.stratum-tree__root ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.stratum-tree__node {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-xs) var(--space-sm);
+  cursor: default;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-primary);
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-tree__node:hover {
+  background: var(--color-bg-hover);
+}
+
+.stratum-tree__node--selected {
+  background: var(--color-bg-active);
+}
+
+.stratum-tree__toggle {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: 10px;
+  width: var(--space-lg);
+  color: var(--color-text-tertiary);
+  transition: color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-tree__toggle:hover {
+  color: var(--color-text-primary);
+}
+
+.stratum-tree__spacer {
+  width: var(--space-lg);
+  display: inline-block;
+}
+
+.stratum-tree__label {
+  cursor: pointer;
+  flex: 1;
+  font-family: var(--font-body);
+  color: var(--color-text-primary);
+}
+
+.stratum-tree__badge {
+  margin-left: var(--space-xs);
+  font-size: 10px;
+  padding: var(--space-2xs) var(--space-sm);
+  border-radius: var(--radius-full);
+  background: var(--info-bg);
+  color: var(--info);
+  border: 1px solid currentColor;
+  font-family: var(--font-body);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.stratum-tree__meta {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+/* ============================================================
+   Config Editor
+   ============================================================ */
+.stratum-config-editor__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+}
+
+.stratum-config-editor__table th {
+  text-align: start;
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 2px solid var(--color-border-default);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  font-family: var(--font-body);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stratum-config-editor__table td {
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.stratum-config-editor__table code {
+  font-family: var(--font-code);
+  font-size: var(--font-size-sm);
+  background: var(--code-bg);
+  color: var(--code-text);
+  padding: 1px 4px;
+  border-radius: var(--radius-sm);
+}
+
+.stratum-config-editor__row--locked {
+  background: var(--color-warning-bg);
+}
+
+.stratum-config-editor__source {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-code);
+  font-size: var(--font-size-sm);
+}
+
+.stratum-config-editor__add {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+  padding: var(--space-sm) 0;
+}
+
+.stratum-config-editor__add input {
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--color-border-input);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+  transition: border-color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-config-editor__add input:hover {
+  border-color: var(--color-border-strong);
+}
+
+.stratum-config-editor__add input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================================
+   Permission Editor
+   ============================================================ */
+.stratum-permission-editor__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+}
+
+.stratum-permission-editor__table th {
+  text-align: start;
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 2px solid var(--color-border-default);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  font-family: var(--font-body);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.stratum-permission-editor__table td {
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.stratum-permission-editor__table code {
+  font-family: var(--font-code);
+  font-size: var(--font-size-sm);
+  background: var(--code-bg);
+  color: var(--code-text);
+  padding: 1px 4px;
+  border-radius: var(--radius-sm);
+}
+
+.stratum-permission-editor__source {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-code);
+  font-size: var(--font-size-sm);
+}
+
+.stratum-permission-editor__add {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+  padding: var(--space-sm) 0;
+}
+
+.stratum-permission-editor__add input,
+.stratum-permission-editor__add select {
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--color-border-input);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+  transition: border-color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-permission-editor__add input:hover,
+.stratum-permission-editor__add select:hover {
+  border-color: var(--color-border-strong);
+}
+
+.stratum-permission-editor__add input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================================
+   Badges
+   ============================================================ */
+.stratum-badge {
+  display: inline-block;
+  padding: var(--space-2xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-body);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+}
+
+.stratum-badge--locked {
+  background: var(--color-badge-locked-bg);
+  color: var(--color-badge-locked-text);
+}
+
+.stratum-badge--inherited {
+  background: var(--color-badge-inherited-bg);
+  color: var(--color-badge-inherited-text);
+}
+
+.stratum-badge--delegated {
+  background: var(--color-badge-delegated-bg);
+  color: var(--color-badge-delegated-text);
+}
+
+.stratum-badge--own {
+  background: var(--color-badge-own-bg);
+  color: var(--color-badge-own-text);
+}
+
+/* ============================================================
+   Buttons (Config + Permission Editors)
+   ============================================================ */
+.stratum-config-editor button,
+.stratum-permission-editor button {
+  padding: var(--space-xs) var(--space-md);
+  border: 1px solid var(--color-border-input);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-size: var(--font-size-base);
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-config-editor button:hover,
+.stratum-permission-editor button:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-border-strong);
+}
+
+.stratum-config-editor button:disabled,
+.stratum-permission-editor button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================================
+   Skeleton Loaders
+   ============================================================ */
+.stratum-skeleton {
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  animation: stratum-shimmer 1.5s ease-in-out infinite;
+}
+
+.stratum-skeleton--circle {
+  border-radius: var(--radius-full);
+}
+
+@keyframes stratum-shimmer {
+  0% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+  100% { opacity: 0.4; }
+}
+
+/* Table Skeleton — matches ConfigEditor/PermissionEditor table styling */
+.stratum-table-skeleton__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-body);
+}
+
+.stratum-table-skeleton__table th {
+  text-align: start;
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 2px solid var(--color-border-default);
+}
+
+.stratum-table-skeleton__table td {
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--color-bg-hover);
+}
+
+/* ============================================================
+   Toast Notifications
+   ============================================================ */
+.stratum-toast-container {
+  position: fixed;
+  top: var(--space-lg);
+  inset-inline-end: var(--space-lg);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  pointer-events: none;
+  max-width: 400px;
+}
+
+.stratum-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-inline-start: 3px solid var(--text-tertiary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  pointer-events: auto;
+  animation: stratum-toast-enter var(--duration-normal) var(--ease-out);
+}
+
+.stratum-toast--success {
+  border-inline-start-color: var(--success);
+}
+
+.stratum-toast--error {
+  border-inline-start-color: var(--error);
+}
+
+.stratum-toast--warning {
+  border-inline-start-color: var(--warning);
+}
+
+.stratum-toast--info {
+  border-inline-start-color: var(--info);
+}
+
+.stratum-toast__message {
+  flex: 1;
+  line-height: 1.4;
+}
+
+.stratum-toast__dismiss {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  font-size: var(--font-size-lg);
+  padding: var(--space-xs);
+  line-height: 1;
+  border-radius: var(--radius-sm);
+  transition: color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-toast__dismiss:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+
+.stratum-toast__dismiss:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+@keyframes stratum-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ============================================================
+   Empty State
+   ============================================================ */
+.stratum-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--space-3xl) var(--space-xl);
+  font-family: var(--font-body);
+}
+
+.stratum-empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--space-lg);
+  color: var(--color-text-tertiary);
+}
+
+.stratum-empty-state__title {
+  margin: 0 0 var(--space-sm);
+  font-family: var(--font-display);
+  font-size: var(--font-size-lg);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  line-height: 1.3;
+  text-wrap: balance;
+}
+
+.stratum-empty-state__description {
+  margin: 0 0 var(--space-xl);
+  font-size: var(--font-size-md);
+  color: var(--color-text-secondary);
+  max-width: 420px;
+  line-height: 1.6;
+}
+
+.stratum-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+}
+
+.stratum-empty-state__action {
+  padding: var(--space-sm) var(--space-lg);
+  background: var(--accent);
+  color: var(--color-text-on-primary);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-body);
+  font-size: var(--font-size-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-empty-state__action:hover {
+  background: var(--accent-hover);
+}
+
+.stratum-empty-state__action:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.stratum-empty-state__docs {
+  font-size: var(--font-size-md);
+  color: var(--sandstone);
+  text-decoration: none;
+  font-family: var(--font-body);
+  transition: color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-empty-state__docs:hover {
+  color: var(--text-primary);
+  text-decoration: underline;
+}
+
+.stratum-empty-state__docs:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================================
+   Tenant Health Card
+   ============================================================ */
+.stratum-tenant-health-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-body);
+}
+
+.stratum-tenant-health-card--clickable {
+  cursor: pointer;
+  transition: box-shadow var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out);
+}
+
+.stratum-tenant-health-card--clickable:hover {
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-border-strong);
+}
+
+.stratum-tenant-health-card--clickable:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.stratum-tenant-health-card__dot {
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-full);
+  margin-top: 4px;
+}
+
+.stratum-tenant-health-card__dot--ok {
+  background: var(--success);
+}
+
+.stratum-tenant-health-card__dot--override {
+  background: var(--warning);
+}
+
+.stratum-tenant-health-card__dot--missing,
+.stratum-tenant-health-card__dot--conflict {
+  background: var(--error);
+}
+
+.stratum-tenant-health-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  flex: 1;
+  min-width: 0;
+}
+
+.stratum-tenant-health-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.stratum-tenant-health-card__name {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.stratum-tenant-health-card__industry {
+  display: inline-block;
+  padding: var(--space-2xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  background: var(--color-badge-own-bg);
+  color: var(--color-badge-own-text);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+}
+
+.stratum-tenant-health-card__slug {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+.stratum-tenant-health-card__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.stratum-tenant-health-card__stats span + span::before {
+  content: " · ";
+  margin-inline-end: var(--space-xs);
+}
+
+.stratum-tenant-health-card__activity {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================================
+   Config Drift Indicator
+   ============================================================ */
+.stratum-config-drift-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-body);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.stratum-config-drift-indicator--sm {
+  padding: var(--space-2xs) var(--space-sm);
+  font-size: var(--font-size-xs);
+}
+
+.stratum-config-drift-indicator--md {
+  padding: var(--space-xs) var(--space-md);
+  font-size: var(--font-size-sm);
+}
+
+.stratum-config-drift-indicator__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.stratum-config-drift-indicator__dot--ok {
+  background: var(--success);
+}
+
+.stratum-config-drift-indicator__dot--override {
+  background: var(--warning);
+}
+
+.stratum-config-drift-indicator__dot--missing,
+.stratum-config-drift-indicator__dot--conflict {
+  background: var(--error);
+}
+
+.stratum-config-drift-indicator--ok {
+  background: var(--success-bg);
+  color: var(--success);
+}
+
+.stratum-config-drift-indicator--override {
+  background: var(--warning-bg);
+  color: var(--warning);
+}
+
+.stratum-config-drift-indicator--missing,
+.stratum-config-drift-indicator--conflict {
+  background: var(--error-bg);
+  color: var(--error);
+}
+
+/* ============================================================
+   Tenant Theme Provider
+   ============================================================ */
+.stratum-tenant-theme-provider {
+  display: contents;
+}