/* XDimension interface foundations.
 *
 * These aliases form the shared contract between the existing workstation and
 * incremental React surfaces. Product modules consume semantic roles; raw
 * palette values stay private to this layer.
 */
@font-face {
  font-family: Inter;
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --xd-color-canvas: var(--xd-surface-0, #030712);
  --xd-color-surface: var(--xd-surface-1, #060c1a);
  --xd-color-surface-raised: var(--xd-surface-2, #091122);
  --xd-color-surface-active: var(--xd-surface-3, #0d172c);
  --xd-color-text-primary: var(--xd-text-1, #f4f7fb);
  --xd-color-text-secondary: var(--xd-text-2, #cbd7e7);
  --xd-color-text-muted: var(--xd-text-3, #91a2bb);
  --xd-color-border: var(--xd-border-soft, rgba(108, 132, 180, 0.24));
  --xd-color-border-emphasis: var(--xd-border-strong, rgba(125, 211, 252, 0.38));
  --xd-color-action: var(--xd-cyan, #22d3ee);
  --xd-color-accent: var(--xd-violet, #8b5cf6);
  --xd-color-positive: #2dd4a7;
  --xd-color-negative: #fb7185;
  --xd-color-caution: #f5b642;

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

  --xd-radius-control: 5px;
  --xd-radius-surface: 7px;
  --xd-border-width: 1px;
  --xd-control-height-compact: 30px;
  --xd-control-height: 36px;
  --xd-control-height-touch: 44px;

  --xd-font-size-caption: calc(11px * var(--xd-user-font-scale, 1));
  --xd-font-size-body: calc(13px * var(--xd-user-font-scale, 1));
  --xd-font-size-label: calc(12px * var(--xd-user-font-scale, 1));
  --xd-font-size-title: calc(15px * var(--xd-user-font-scale, 1));
  --xd-line-height-tight: 1.25;
  --xd-line-height-body: 1.45;

  --xd-duration-fast: 120ms;
  --xd-duration-standard: 180ms;
  --xd-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --xd-focus-outline: 2px solid var(--xd-color-action);
  --xd-layer-popover: 1200;
  --xd-shadow-surface: 0 18px 48px rgba(0, 0, 0, 0.42);
}

/* Approved first-contact identity: the cinematic landing and its public guide.
 * Scoped aliases preserve the workstation's existing financial palette. */
body[data-xd-landing="journey"], body[data-xd-landing="continuum-guide"] {
  --xd-color-canvas: #080d23;
  --xd-color-surface: #0b142e;
  --xd-color-surface-raised: #111c3e;
  --xd-color-surface-active: #1b2852;
  --xd-color-text-primary: #f3f5ff;
  --xd-color-text-secondary: #c5d1ed;
  --xd-color-text-muted: #9aaecf;
  --xd-color-border: #7e9fde35;
  --xd-color-border-emphasis: #6edbff70;
  --xd-color-action: #5ee1ff;
  --xd-color-accent: #b68aff;
  --xd-color-positive: #5ee1ff;
  --xd-color-negative: #c48dff;
  --xd-landing-blue: #3c56ff;
  --xd-landing-highlight: #d4c4ff;
  --xd-landing-pill: 100px;
  --xd-shadow-surface: 0 20px 70px #02071866;
  --xd-focus-outline: 2px solid var(--xd-color-action);
}

/* User-approved, expressive entrance surfaces. The trading workstation keeps
 * its compact control geometry and timing. */
body[data-xd-landing], .xd-cloud-welcome {
  --xd-radius-control: 16px;
  --xd-radius-surface: 28px;
  --xd-radius-pill: 999px;
  --xd-duration-enter: 720ms;
  --xd-duration-scene: 960ms;
  --xd-duration-orbit: 28s;
}

.xd-ui-surface {
  border: var(--xd-border-width) solid var(--xd-color-border);
  border-radius: var(--xd-radius-surface);
  background: var(--xd-color-surface);
  color: var(--xd-color-text-secondary);
  box-shadow: var(--xd-shadow-surface);
}

.xd-ui-button,
.xd-ui-icon-button,
.xd-ui-input {
  min-height: var(--xd-control-height);
  border: var(--xd-border-width) solid var(--xd-color-border);
  border-radius: var(--xd-radius-control);
  background: var(--xd-color-surface-raised);
  color: var(--xd-color-text-secondary);
  font: 600 var(--xd-font-size-body)/var(--xd-line-height-tight) var(--xd-font-ui, Inter, system-ui, sans-serif);
  letter-spacing: 0;
}

.xd-ui-button,
.xd-ui-icon-button {
  transition:
    border-color var(--xd-duration-fast) ease,
    background-color var(--xd-duration-fast) ease,
    color var(--xd-duration-fast) ease,
    transform var(--xd-duration-fast) var(--xd-ease-out);
}

.xd-ui-button:hover,
.xd-ui-icon-button:hover {
  border-color: var(--xd-color-border-emphasis);
  background: var(--xd-color-surface-active);
  color: var(--xd-color-text-primary);
}

.xd-ui-button:active,
.xd-ui-icon-button:active {
  transform: translateY(1px);
}

.xd-ui-button:disabled,
.xd-ui-icon-button:disabled,
.xd-ui-input:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.xd-ui-button:focus-visible,
.xd-ui-icon-button:focus-visible,
.xd-ui-input:focus-visible {
  outline: var(--xd-focus-outline);
  outline-offset: 2px;
}

.xd-ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xd-space-2);
  padding-inline: var(--xd-space-3);
}

.xd-ui-button[data-tone="primary"] {
  border-color: color-mix(in srgb, var(--xd-color-action) 52%, transparent);
  background: color-mix(in srgb, var(--xd-color-action) 14%, var(--xd-color-surface-raised));
  color: var(--xd-color-text-primary);
}

.xd-ui-button[data-size="compact"] {
  min-height: var(--xd-control-height-compact);
  padding-inline: 10px;
  font-size: var(--xd-font-size-caption);
}

.xd-ui-icon-button {
  display: inline-grid;
  width: var(--xd-control-height);
  min-width: var(--xd-control-height);
  padding: 0;
  place-items: center;
}

.xd-ui-icon-button svg,
.xd-ui-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xd-ui-input {
  width: 100%;
  min-width: 0;
  padding-inline: var(--xd-space-3);
  font-weight: 500;
}

.xd-ui-input::placeholder {
  color: var(--xd-color-text-muted);
  opacity: 0.78;
}

.xd-ui-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  color: var(--xd-color-text-muted);
  font-size: var(--xd-font-size-caption);
  font-weight: 700;
  line-height: 1;
}

.xd-ui-status::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--xd-color-caution);
  content: "";
}

.xd-ui-status[data-tone="positive"]::before {
  background: var(--xd-color-positive);
}

.xd-ui-status[data-tone="negative"]::before {
  background: var(--xd-color-negative);
}

.xd-ui-status[data-tone="positive"] {
  color: color-mix(in srgb, var(--xd-color-positive) 72%, var(--xd-color-text-secondary));
}

.xd-ui-status[data-tone="negative"] {
  color: color-mix(in srgb, var(--xd-color-negative) 72%, var(--xd-color-text-secondary));
}

.xd-ui-data {
  color: var(--xd-color-text-primary);
  font-family: var(--xd-font-data, "Segoe UI Variable", "Segoe UI", monospace);
  font-variant-numeric: tabular-nums;
}

.xd-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .xd-ui-button,
  .xd-ui-icon-button {
    transition: none;
  }
}

/* Visitor palette: luminous galaxy violet, scoped to marketing surfaces. */
body[data-xd-landing="living"] {
  --xd-color-canvas: #32136c;
  --xd-color-surface: #582395;
  --xd-color-surface-raised: #7238bb;
  --xd-color-surface-active: #924bd5;
  --xd-color-text-primary: #fffaff;
  --xd-color-text-secondary: #f1e9ff;
  --xd-color-text-muted: #dbcef5;
  --xd-color-action: #e2b3ff;
  --xd-color-accent: #f393ff;
  --xd-color-positive: #d9a1ff;
  --xd-color-negative: #9ceaff;
  --xd-color-caution: #ffdaa9;
  --xd-color-border: rgba(226, 199, 255, .28);
  --xd-color-border-emphasis: rgba(236, 164, 255, .65);
  --xd-focus-outline: 2px solid #ffdbad;
  --xd-landing-hero-wash: #381374c4;
  --xd-landing-hero-clear: #7c2ea536;
  --xd-landing-nebula: #b347ff50;
  --xd-landing-bloom: #f780e947;
  --xd-landing-sunlight: #ffbb783b;
  --xd-landing-pearl: #f8f2ff;
  --xd-landing-ink: #301454;
  --xd-landing-positive-glow: #bd65ff91;
}