/* Canonical visual contract. Loaded after legacy and page-specific layers. */
:root {
  --surface-page: #0b0908;
  --surface-section: rgba(14, 11, 11, 0.94);
  --surface-panel: linear-gradient(180deg, rgba(24, 19, 18, 0.96), rgba(13, 11, 11, 0.97));
  --surface-raised: linear-gradient(180deg, rgba(31, 24, 22, 0.97), rgba(17, 13, 13, 0.98));
  --surface-interactive: linear-gradient(180deg, rgba(41, 30, 28, 0.98), rgba(25, 19, 18, 0.98));
  --surface-interactive-hover: linear-gradient(180deg, rgba(55, 38, 35, 0.98), rgba(29, 22, 21, 0.98));

  --line-soft: rgba(255, 238, 235, 0.06);
  --line-default: rgba(170, 111, 105, 0.24);
  --line-strong: rgba(204, 132, 124, 0.48);

  --radius-control: 9px;
  --radius-panel: 12px;
  --radius-dialog: 16px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --elevation-panel: 0 10px 24px rgba(0, 0, 0, 0.26);
  --elevation-dialog: 0 20px 52px rgba(0, 0, 0, 0.48);
  --focus-ring-color: rgba(225, 132, 120, 0.78);
  --focus-ring-shadow: 0 0 0 3px rgba(225, 132, 120, 0.16);

  /* Compatibility aliases for older components. */
  --radius: var(--radius-panel);
  --card-radius: var(--radius-panel);
  --ui-radius-xs: 8px;
  --ui-radius-sm: var(--radius-control);
  --ui-radius-md: var(--radius-panel);
  --ui-radius-lg: var(--radius-dialog);
  --ui-border-soft: var(--line-soft);
  --ui-border: var(--line-default);
  --ui-border-strong: var(--line-strong);
  --ui-surface: var(--surface-panel);
  --ui-surface-raised: var(--surface-raised);
  --ui-control: var(--surface-interactive);
  --ui-control-hover: var(--surface-interactive-hover);
  --ui-shadow-soft: var(--elevation-panel);
  --ui-ring: var(--focus-ring-shadow);
}

/* Structural surfaces share one depth language. */
.panel {
  border-color: var(--line-soft);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 235, 0.035),
    var(--elevation-panel);
}

.card {
  border-radius: var(--radius-panel);
}

:where(dialog, .modal, [role="dialog"]) {
  --radius: var(--radius-dialog);
}

/* One keyboard-focus language across native and custom controls. */
body :is(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="tab"],
  [role="menuitem"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: var(--focus-ring-shadow);
}

:where(button, .button, input, select, textarea, [role="button"]):disabled,
:where(.button, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.46;
  filter: saturate(0.6);
  box-shadow: none;
}

/* Stable numeric columns and metrics reduce visual jitter. */
:where(
  table,
  .stat-value,
  .metric-value,
  [class*="price"],
  [class*="count"],
  [class*="amount"],
  time,
  [data-technical-value]
) {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Tabler icons use predictable optical sizes in the shared shell. */
.icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* Interaction must not depend on hover alone or move surrounding layout. */
:where(.button, button, .card, [role="button"], .nav-link) {
  transition-duration: var(--motion-fast, 160ms);
  transition-timing-function: var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}

@media (prefers-reduced-motion: reduce) {
  :where(.button, button, .card, [role="button"], .nav-link) {
    transition-duration: 1ms !important;
  }
}