:root {
  color-scheme: light;
  --color-canvas: #f4f7fa;
  --color-surface-raised: #ffffff;
  --color-surface-soft: #e8eef4;
  --color-border-subtle: rgba(16, 32, 51, 0.17);
  --color-border-strong: rgba(16, 32, 51, 0.34);
  --color-text-primary: #102033;
  --color-text-secondary: #42566a;
  --color-text-secondary-strong: #263b50;
  --color-accent: #087f6f;
  --color-accent-strong: #056557;
  --color-on-accent: #ffffff;
  --color-link: #056557;
  --color-danger: #b42318;
  --color-warning: #7a4b00;
  --color-success: #056557;
  --color-focus: #006b5c;
  --surface-sidebar: rgba(255, 255, 255, 0.94);
  --surface-topbar: rgba(255, 255, 255, 0.9);
  --surface-card: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
  --surface-control: #ffffff;
  --surface-control-muted: #edf2f6;
  --surface-subtle: rgba(16, 32, 51, 0.045);
  --surface-hover: rgba(8, 127, 111, 0.08);
  --surface-active: rgba(8, 127, 111, 0.13);
  --surface-success: rgba(5, 101, 87, 0.09);
  --surface-warning: rgba(122, 75, 0, 0.09);
  --surface-danger: rgba(180, 35, 24, 0.09);
  --surface-overlay: rgba(255, 255, 255, 0.98);
  --body-art:
    radial-gradient(circle at 12% 15%, rgba(8, 127, 111, 0.09), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(44, 99, 160, 0.09), transparent 31rem),
    linear-gradient(180deg, #f7fafc 0%, #eef3f7 52%, #f4f7fa 100%);
  --shadow-panel: 0 18px 50px rgba(16, 32, 51, 0.12);
  --shadow-overlay: 0 18px 55px rgba(16, 32, 51, 0.2);
  --focus-shadow: 0 0 0 3px rgba(0, 107, 92, 0.2);

  /* Compatibility aliases for the existing portal workspaces. */
  --background: var(--color-canvas);
  --background-raised: var(--color-surface-raised);
  --background-soft: var(--color-surface-soft);
  --surface: var(--color-surface-raised);
  --border: var(--color-border-subtle);
  --border-strong: var(--color-border-strong);
  --text: var(--color-text-primary);
  --text-primary: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --text-muted: var(--color-text-secondary);
  --muted-strong: var(--color-text-secondary-strong);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
  --accent-ink: var(--color-on-accent);
  --danger: var(--color-danger);
  --warning: var(--color-warning);
  --shadow: var(--shadow-panel);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-canvas: #07111f;
  --color-surface-raised: #0c1726;
  --color-surface-soft: #111f31;
  --color-border-subtle: rgba(166, 196, 224, 0.18);
  --color-border-strong: rgba(166, 196, 224, 0.34);
  --color-text-primary: #f3f7fb;
  --color-text-secondary: #a9bacb;
  --color-text-secondary-strong: #cad6e2;
  --color-accent: #38d2b1;
  --color-accent-strong: #70ecd0;
  --color-on-accent: #04251f;
  --color-link: #70ecd0;
  --color-danger: #ff9b9b;
  --color-warning: #ffd27a;
  --color-success: #70ecd0;
  --color-focus: #70ecd0;
  --surface-sidebar: rgba(7, 17, 31, 0.9);
  --surface-topbar: rgba(7, 17, 31, 0.82);
  --surface-card: linear-gradient(160deg, rgba(17, 31, 49, 0.94), rgba(10, 22, 37, 0.94));
  --surface-control: rgba(4, 18, 33, 0.76);
  --surface-control-muted: rgba(4, 18, 33, 0.48);
  --surface-subtle: rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.045);
  --surface-active: rgba(56, 210, 177, 0.12);
  --surface-success: rgba(56, 210, 177, 0.09);
  --surface-warning: rgba(255, 210, 122, 0.1);
  --surface-danger: rgba(255, 155, 155, 0.1);
  --surface-overlay: rgba(6, 22, 39, 0.98);
  --body-art:
    radial-gradient(circle at 12% 15%, rgba(39, 175, 155, 0.15), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(68, 125, 192, 0.14), transparent 31rem),
    linear-gradient(180deg, #07111f 0%, #091421 52%, #07111f 100%);
  --shadow-panel: 0 18px 55px rgba(0, 0, 0, 0.3);
  --shadow-overlay: 0 18px 55px rgba(0, 0, 0, 0.42);
  --focus-shadow: 0 0 0 3px rgba(112, 236, 208, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-canvas: #07111f;
    --color-surface-raised: #0c1726;
    --color-surface-soft: #111f31;
    --color-border-subtle: rgba(166, 196, 224, 0.18);
    --color-border-strong: rgba(166, 196, 224, 0.34);
    --color-text-primary: #f3f7fb;
    --color-text-secondary: #a9bacb;
    --color-text-secondary-strong: #cad6e2;
    --color-accent: #38d2b1;
    --color-accent-strong: #70ecd0;
    --color-on-accent: #04251f;
    --color-link: #70ecd0;
    --color-danger: #ff9b9b;
    --color-warning: #ffd27a;
    --color-success: #70ecd0;
    --color-focus: #70ecd0;
    --surface-sidebar: rgba(7, 17, 31, 0.9);
    --surface-topbar: rgba(7, 17, 31, 0.82);
    --surface-card: linear-gradient(160deg, rgba(17, 31, 49, 0.94), rgba(10, 22, 37, 0.94));
    --surface-control: rgba(4, 18, 33, 0.76);
    --surface-control-muted: rgba(4, 18, 33, 0.48);
    --surface-subtle: rgba(255, 255, 255, 0.045);
    --surface-hover: rgba(255, 255, 255, 0.045);
    --surface-active: rgba(56, 210, 177, 0.12);
    --surface-success: rgba(56, 210, 177, 0.09);
    --surface-warning: rgba(255, 210, 122, 0.1);
    --surface-danger: rgba(255, 155, 155, 0.1);
    --surface-overlay: rgba(6, 22, 39, 0.98);
    --body-art:
      radial-gradient(circle at 12% 15%, rgba(39, 175, 155, 0.15), transparent 28rem),
      radial-gradient(circle at 88% 8%, rgba(68, 125, 192, 0.14), transparent 31rem),
      linear-gradient(180deg, #07111f 0%, #091421 52%, #07111f 100%);
    --shadow-panel: 0 18px 55px rgba(0, 0, 0, 0.3);
    --shadow-overlay: 0 18px 55px rgba(0, 0, 0, 0.42);
    --focus-shadow: 0 0 0 3px rgba(112, 236, 208, 0.2);
  }
}

html {
  background: var(--color-canvas);
}

body {
  color: var(--color-text-primary);
  background: var(--body-art);
}

::selection {
  color: var(--color-on-accent);
  background: var(--color-accent);
}

a {
  color: var(--color-link);
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 3px;
}

.sidebar {
  background: var(--surface-sidebar);
}

.topbar {
  background: var(--surface-topbar);
}

.sign-in-story {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-accent) 11%, transparent),
      transparent 42%
    ),
    var(--surface-sidebar);
}

.trace-node {
  background: color-mix(in srgb, var(--color-text-secondary) 24%, transparent);
}

.notice,
.device-mode-option,
.explicit-sign-in-provider-mark {
  background: var(--surface-subtle);
}

.device-mode-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: var(--surface-active);
}

.card {
  background: var(--surface-card);
  box-shadow: var(--shadow-panel);
}

.nav-item:hover,
.secondary-button:hover,
.text-button:hover {
  background: var(--surface-hover);
}

.nav-item-active {
  border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
  color: var(--color-accent-strong);
  background: var(--surface-active);
}

.nav-icon,
.permission-chip,
.badge {
  background: var(--surface-subtle);
}

.badge-live,
.notice-success,
.scanner-operational-result,
.passport-resolver-delivery {
  border-color: color-mix(in srgb, var(--color-success) 36%, transparent) !important;
  color: var(--color-success);
  background: var(--surface-success) !important;
}

.notice-warning,
.identity-registry-record-warning,
.identity-registry-ambiguity-warning,
.passport-validation-issues,
.passport-draft-invalid {
  border-color: color-mix(in srgb, var(--color-warning) 42%, transparent) !important;
  background: var(--surface-warning) !important;
}

.notice-warning {
  color: var(--color-warning);
}

.notice-error {
  border-color: color-mix(in srgb, var(--color-danger) 42%, transparent) !important;
  color: var(--color-danger);
  background: var(--surface-danger) !important;
}

.loading-mark,
.brand-mark,
.workspace-symbol,
.avatar,
.scanner-camera-symbol,
.scanner-empty-mark {
  border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
  color: var(--color-accent-strong);
  background: var(--surface-active);
}

.primary-button {
  color: var(--color-on-accent);
  background: linear-gradient(135deg, var(--color-accent-strong), var(--color-accent));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.secondary-button {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  background: var(--surface-subtle);
}

.text-button {
  color: var(--color-text-secondary-strong);
}

:where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-primary) !important;
  background: var(--surface-control) !important;
}

:where(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
  border-color: var(--color-focus) !important;
  box-shadow: var(--focus-shadow) !important;
}

:where(input[readonly], input:disabled, select:disabled, textarea:disabled) {
  color: var(--color-text-secondary) !important;
  background: var(--surface-control-muted) !important;
}

option {
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
}

.smart-combobox-list {
  border-color: var(--color-border-strong);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-overlay);
}

.operational-lifecycle-hold,
.operational-advanced-timing,
.operational-csv-table th {
  background: var(--surface-subtle) !important;
}

.operational-csv-table th {
  color: var(--color-text-secondary);
  backdrop-filter: blur(12px);
}

.smart-combobox-option[aria-selected='true'] {
  background: var(--surface-active);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.operational-advanced-timing,
.activation-confirmation,
.identity-registry-ambiguity,
.passport-content-hash-full,
.passport-resolver-lineage,
.portal-shell
  :where(.product-detail-metadata, .scanner-result-grid, [class$='-metadata'], [class$='-values'])
  > div {
  background: var(--surface-subtle) !important;
}

.scanner-camera-stage {
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--color-accent) 12%, transparent),
      transparent 55%
    ),
    var(--color-surface-soft);
}

.scanner-target {
  border-color: color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
  box-shadow:
    0 0 0 999px color-mix(in srgb, var(--color-canvas) 30%, transparent),
    0 0 28px color-mix(in srgb, var(--color-accent) 24%, transparent);
}

code,
pre {
  color: var(--color-text-secondary-strong);
}

.account-theme-control {
  color: var(--color-text-primary);
}

.account-theme-control .theme-preference-label {
  color: var(--color-text-secondary-strong);
}

.account-theme-control .theme-preference-context {
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .account-theme-control,
  .card,
  .sidebar,
  .topbar {
    border: 1px solid CanvasText;
  }

  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight !important;
  }
}

@media print {
  .account-theme-control {
    display: none;
  }
}