/* Stratamize token bridge. The original applications remain in vendor/. */
:root[data-conference-demo] {
  --font-sans: var(--stz-font-body);
  --font-display: var(--stz-font-display);
  --font-mono: var(--stz-font-body);
  --sans: var(--stz-font-body);
  --mono: var(--stz-font-body);
  --p-display: var(--stz-font-display);
  --stz-font-utility: var(--stz-font-body);
  --stz-ink-950: var(--stz-midnight-950);
  --stz-ink-900: var(--stz-midnight-900);
  --stz-navy-800: var(--stz-midnight-800);
  --stz-paper: var(--stz-white);
  --stz-foam-50: var(--stz-gray-50);
  --stz-mist-100: var(--stz-gray-100);
  --stz-slate-300: var(--stz-gray-300);
  --stz-slate-600: var(--stz-gray-600);
  --pos-surface-raised: var(--stz-surface-raised);
  --pos-surface-hover: var(--stz-surface-hover);
  --pos-shell-surface: var(--stz-surface-panel);
  --pos-shell-text: var(--stz-text);
  --pos-shell-muted: var(--stz-text-muted);
  --pos-shell-rule: var(--stz-border-hairline);
  --pos-motion-fast: var(--stz-duration-fast);
  --pos-motion-standard: var(--stz-duration-standard);
  --pos-motion-route: var(--stz-duration-emphasis);
  --brand: var(--stz-accent);
  --brand-bright: var(--stz-accent-text);
  --brand-deep: var(--stz-action-primary-hover);
  --brand-darker: var(--stz-action-primary-active);
  --brand-grad-to: var(--stz-accent-text);
  --brand-tint: var(--stz-accent-subtle);
  --brand-tint-strong: var(--stz-accent-subtle);
  --brand-contrast: var(--stz-on-action-primary);
  --text-on-brand: var(--stz-on-action-primary);
  --ring: var(--stz-focus);
  --bg: var(--stz-surface-canvas);
  --bg-base: var(--stz-surface-canvas);
  --bg-page: var(--stz-surface-canvas);
  --page-bg: var(--stz-surface-canvas);
  --page-glow-1: var(--stz-accent-subtle);
  --page-glow-2: transparent;
  --page-glow-3: transparent;
  --surface: var(--stz-surface-panel);
  --surface-2: var(--stz-surface-raised);
  --surface-3: var(--stz-surface-hover);
  --surface-card: var(--stz-surface-panel);
  --surface-raised: var(--stz-surface-raised);
  --surface-sunken: var(--stz-surface-sunken);
  --surface-hover: var(--stz-surface-hover);
  --text: var(--stz-text);
  --text-1: var(--stz-text);
  --text-2: var(--stz-text-muted);
  --text-strong: var(--stz-text);
  --text-body: var(--stz-gray-300);
  --text-muted: var(--stz-text-muted);
  --text-faint: var(--stz-text-muted);
  --muted: var(--stz-gray-300);
  --border: var(--stz-border-hairline);
  --border-2: var(--stz-border-strong);
  --border-default: var(--stz-border-hairline);
  --border-subtle: var(--stz-border-hairline);
  --border-strong: var(--stz-border-strong);
  --accent: var(--stz-accent-text);
  --accent-2: var(--stz-accent);
  --glow: var(--stz-accent-subtle);
  --success: var(--stz-status-success);
  --warning: var(--stz-status-warning);
  --error: var(--stz-status-danger);
  --info: var(--stz-status-info);
}
html[data-conference-demo] body {
  isolation: isolate;
  font-family: var(--stz-font-body);
  background: var(--stz-surface-canvas);
  color: var(--stz-text);
}
html[data-conference-demo] #demo-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
html[data-conference-demo="merchant"] .lds-circuit-pulse { display: none; }
html[data-conference-demo] :is(form, fieldset, [role="dialog"], .modal, .drawer) { background-color: var(--stz-surface-panel); }
html[data-conference-demo] :is(input, select, textarea) { background-color: var(--stz-surface-raised); color: var(--stz-text); }
html[data-conference-demo] :is(aside.pos-shell, aside.sidebar) { background: var(--stz-surface-canvas); }
@supports ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
  html[data-conference-demo] :is(aside.pos-shell, aside.sidebar) {
    background: color-mix(in srgb, var(--stz-surface-canvas) 72%, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}
/* Legacy compatibility has an important blanket blur reset. Override it in
   that same layer so only the requested sidebar gains backdrop filtering. */
@layer legacy-demo {
  html[data-conference-demo="merchant"] body aside.sidebar {
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
  }
}
html[data-conference-demo] :is(button, input, select, textarea, h1, h2, h3, nav, .font-mono) {
  font-family: var(--stz-font-body);
}
html[data-conference-demo] :is(.showcase-banner, #demo-banner) {
  height: auto;
  flex-wrap: wrap;
  background: var(--stz-surface-shell) !important;
  color: var(--stz-text-on-dark) !important;
  border-bottom: 2px solid var(--stz-accent) !important;
  font: 500 0.875rem/1.5 var(--stz-font-body) !important;
  padding: var(--stz-space-3) var(--stz-space-5) !important;
}
html[data-conference-demo] :is(.showcase-banner, #demo-banner) a {
  color: var(--stz-text-on-dark) !important;
  border-color: var(--stz-border-control) !important;
}
html[data-conference-demo] :is(.showcase-banner, #demo-banner) button,
html[data-conference-demo] .showcase-cta {
  background: var(--stz-action-primary) !important;
  border: 1px solid var(--stz-action-primary-border) !important;
  color: var(--stz-on-action-primary) !important;
  border-radius: var(--stz-radius-control);
  padding: var(--stz-space-2) var(--stz-space-3);
}
html[data-conference-demo] :focus-visible {
  outline: var(--stz-focus-ring) !important;
  outline-offset: var(--stz-focus-offset);
}
html[data-conference-demo="merchant"] :is(.brand-word, .logo-text, .wordmark) { font-family: var(--stz-font-display); }
html[data-conference-demo="merchant"] :is(.btn.primary, .btn-primary, button.primary) {
  background: var(--stz-action-primary);
  color: var(--stz-on-action-primary);
}
html[data-conference-demo="pos"] a[aria-current="page"] {
  background: var(--stz-action-primary);
  color: var(--stz-on-action-primary);
}
html[data-conference-demo="pos"] .recharts-line-curve {
  stroke: var(--stz-accent-text);
}
html[data-conference-demo="pos"] .showcase-product .h-screen { height: calc(100dvh - var(--demo-banner-height, 48px)); }
html[data-conference-demo="pos"] .showcase-product .pos-shell-mobile-trigger { top: calc(var(--demo-banner-height, 48px) + .75rem); }
html[data-conference-demo="merchant"] .brand img { border-radius: var(--stz-radius-control); }
/* Original chart renderer emits literal SVG colors; bridge those legacy marks. */
html[data-conference-demo="merchant"] svg [fill="#A78BFA"] { fill: var(--stz-chart-2); }
html[data-conference-demo="merchant"] svg [stroke="#A78BFA"] { stroke: var(--stz-chart-2); }
html[data-conference-demo="merchant"] [style*="#A78BFA"] { background-color: var(--stz-chart-2) !important; }

/* Shared visual language: flat planes, fine rules, restrained crimson. */
html[data-conference-demo] :is(.card, .kpi-card, .portal-welcome) {
  background: var(--stz-surface-panel);
  border: 1px solid var(--stz-border-hairline);
  border-radius: var(--stz-radius-control);
  box-shadow: none;
}
html[data-conference-demo] :is(main h1, .section-title, .card h2) {
  font-weight: var(--stz-weight-medium);
  letter-spacing: var(--stz-tracking-tight);
  color: var(--stz-text);
}
html[data-conference-demo="pos"] main h1 > span.bg-clip-text {
  background: none;
  color: var(--stz-text);
  -webkit-text-fill-color: currentColor;
}
html[data-conference-demo] .section-title::before {
  content: '';
  display: inline-block;
  width: var(--stz-dash-w);
  height: var(--stz-dash-h);
  margin-right: var(--stz-dash-gap);
  background: var(--stz-accent-decor);
  vertical-align: middle;
}
html[data-conference-demo="merchant"] .sidebar button { border-radius: var(--stz-radius-control); }
html[data-conference-demo="merchant"] .sidebar button.active {
  background: var(--stz-accent-subtle);
  color: var(--stz-text);
  box-shadow: none;
}
html[data-conference-demo="pos"] #chartGrad stop,
html[data-conference-demo="pos"] #lineGrad stop { stop-color: var(--stz-accent-text); }
html[data-conference-demo="pos"] path[filter="url(#chartGlow)"] { filter: none; }
html[data-conference-demo="merchant"] .kpi-hero {
  background: var(--stz-surface-brand);
  color: var(--stz-on-surface-brand);
  border: 0;
  border-radius: var(--stz-radius-control);
  box-shadow: none;
}
html[data-conference-demo="merchant"] .kpi-hero .hero-glow { display: none; }
html[data-conference-demo="merchant"] .kpi-hero :is(.hero-eye, .hero-val, .hero-sub, .hs-eye, .hs-val, .hs-foot) { color: var(--stz-on-surface-brand); opacity: 1; }
html[data-conference-demo="merchant"] .kpi-hero .pulse { background: var(--stz-on-surface-brand); box-shadow: none; animation: none; }
html[data-conference-demo="merchant"] .hero-split { background: transparent; border: 1px solid var(--stz-white-a30); border-radius: var(--stz-radius-control); box-shadow: none; }
html[data-conference-demo="merchant"] .wordmark .glyph { font-weight: var(--stz-weight-bold); letter-spacing: var(--stz-tracking-tight); }
html[data-conference-demo="merchant"] :is(.k-eye, .k-sub) { color: var(--stz-text-muted); }
html[data-conference-demo="merchant"] .portal-welcome {
  background: var(--stz-surface-panel) !important;
  border: 1px solid var(--stz-border-hairline) !important;
  border-radius: var(--stz-radius-control) !important;
}
html[data-conference-demo="merchant"] .wordmark .lds-globe { width: var(--stz-logo-h); height: var(--stz-logo-h); }
html[data-conference-demo="merchant"] .wordmark .lds-globe img { width: 100%; height: 100%; }
html[data-conference-demo="pos"] aside .pos-shell-text.select-none { display: inline-flex; align-items: center; gap: var(--stz-space-2); font-weight: var(--stz-weight-bold); }
html[data-conference-demo="pos"] aside .pos-shell-text.select-none::before {
  content: ''; width: var(--stz-icon-lg); height: var(--stz-icon-lg); flex-shrink: 0;
  background: currentColor;
  mask: url('../../02-brand/assets/logo/stratamize-rocket-light.svg') center / contain no-repeat;
}
html[data-conference-demo] :is(.showcase-banner, #demo-banner) button:is(button, #demo-reset) {
  background: transparent !important;
  color: var(--stz-text-on-dark) !important;
  border: 1px solid var(--stz-border-control) !important;
  font-weight: var(--stz-weight-medium);
}
html[data-conference-demo="merchant"] #demo-banner a[href$="#contact"] {
  background: var(--stz-action-primary);
  border-color: var(--stz-action-primary-border) !important;
  color: var(--stz-on-action-primary) !important;
  border-radius: var(--stz-radius-control) !important;
}
html[data-conference-demo="merchant"] #demo-reset { order: 5; }
@media (max-width: 680px) {
  html[data-conference-demo="merchant"] :is(.wordmark, .ov-month) {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  html[data-conference-demo="merchant"] .wordmark .cobrand { flex-basis: 100%; }
  html[data-conference-demo] :is(.showcase-banner, #demo-banner) {
    gap: var(--stz-space-2) !important;
    padding: var(--stz-space-2) var(--stz-space-3) !important;
  }
  html[data-conference-demo] .showcase-banner > span {
    display: block;
    flex-basis: 100%;
    order: -1;
  }
  html[data-conference-demo] .showcase-banner .showcase-detail { display: inline; }
  html[data-conference-demo] .showcase-banner .showcase-cta { margin-left: 0; }
}