/**
 * Dash Horizon core tokens + layering
 * Shared by client-area and order-form themes.
 */
:root {
  /* Surfaces */
  --dh-bg-page: #070f1d;
  --dh-bg-page-2: #0b1728;
  --dh-bg-panel: rgba(7, 17, 31, 0.92);
  --dh-bg-panel-raised: #0d1b2e;
  --dh-bg-surface-1: rgba(7, 17, 31, 0.92);
  --dh-bg-surface-2: #0d1b2e;
  --dh-bg-surface-3: #132338;
  --dh-bg-input: #172235;
  --dh-bg-hover: rgba(255, 255, 255, 0.06);
  --dh-bg-selected: rgba(111, 152, 197, 0.22);
  --dh-bg-success: rgba(61, 214, 140, 0.14);
  --dh-bg-warning: rgba(245, 200, 76, 0.14);
  --dh-bg-danger: rgba(255, 107, 107, 0.14);
  --dh-bg-table: rgba(7, 17, 31, 0.92);
  --dh-bg-table-row: transparent;
  --dh-bg-table-hover: rgba(255, 255, 255, 0.05);
  --dh-bg-light: #ffffff;
  --dh-bg-light-muted: #f4f7fb;

  /* Text */
  --dh-text-primary: #ffffff;
  --dh-text-secondary: #dce8f8;
  --dh-text-muted: #aab8ca;
  --dh-text-inverse: #101827;
  --dh-text-on-light: #101827;
  --dh-text-on-light-muted: #4b5563;
  --dh-link: #6ea8ff;
  --dh-link-hover: #9bc4ff;

  /* Brand */
  --dh-accent: #1A3F6B;
  --dh-accent-2: #6f98c5;
  --dh-accent-hover: #2a5588;
  --dh-soft: #d8e9ff;
  --dh-border: rgba(216, 233, 255, 0.13);
  --dh-border-2: rgba(255, 255, 255, 0.10);
  --dh-border-strong: rgba(255, 255, 255, 0.22);
  --dh-focus: 0 0 0 3px rgba(111, 152, 197, 0.45);
  --dh-focus-ring: 0 0 0 3px rgba(111, 152, 197, 0.45);

  /* Status */
  --dh-success: #3dd68c;
  --dh-success-bg: rgba(61, 214, 140, 0.14);
  --dh-warning: #f5c84c;
  --dh-warning-bg: rgba(245, 200, 76, 0.14);
  --dh-danger: #ff6b6b;
  --dh-danger-bg: rgba(255, 107, 107, 0.14);
  --dh-info: #6ea8ff;
  --dh-info-bg: rgba(110, 168, 255, 0.14);

  /* Shape */
  --dh-radius-sm: 10px;
  --dh-radius: 14px;
  --dh-radius-lg: 20px;
  --dh-radius-xl: 26px;
  --dh-shadow: 0 35px 90px rgba(0, 0, 0, 0.52);
  --dh-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
  --dh-container: 1280px;
  --dh-font-sans: inherit;
  --dh-transition: 0.22s ease;

  /* Layering — intentional, not extreme one-off z-index hacks */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-mobile-nav: 1200;
  --z-modal: 2000;
  --z-toast: 2100;

  /* Legacy aliases used by older custom.css rules */
  --dh-primary: #1A3F6B;
  --dh-primary-2: #6f98c5;
  --dh-secondary: #1A3F6B;
  --dh-deep: #070f1d;
  --dh-deep-2: #0b1728;
  --dh-ink: #d8e9ff;
  --dh-ink-strong: #ffffff;
  --dh-muted: #aab8ca;
  --dh-bg: #070f1d;
  --dh-bg-2: #0b1728;
  --dh-surface: rgba(7, 17, 31, 0.92);
  --dh-glass: rgba(7, 17, 31, 0.94);
  --dh-glass-border: rgba(216, 233, 255, 0.13);
  --dh-gradient-hero: linear-gradient(135deg, #10233a, #1A3F6B, #07111f);
  --dh-gradient-btn: linear-gradient(135deg, #1A3F6B, #6f98c5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dh-transition: 0.01ms; }
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

body.dh-theme,
body.primary-bg-color.dh-theme {
  background:
    radial-gradient(circle at top left, rgba(26, 63, 107, 0.35), transparent 34%),
    radial-gradient(circle at bottom right, rgba(111, 152, 197, 0.12), transparent 40%),
    linear-gradient(180deg, var(--dh-bg-page), var(--dh-bg-page-2)) !important;
  color: var(--dh-text-secondary);
  min-height: 100vh;
  /* Do NOT force color on all descendants */
}

/* Compatibility surfaces */
.dh-dark-content,
.dh-dark-content p,
.dh-dark-content li,
.dh-dark-content span {
  color: var(--dh-text-secondary);
}

.dh-dark-content h1,
.dh-dark-content h2,
.dh-dark-content h3,
.dh-dark-content h4,
.dh-dark-content h5,
.dh-dark-content strong,
.dh-dark-content b {
  color: var(--dh-text-primary);
}

.dh-light-content,
.dh-module-output.dh-light-content,
.dh-richtext.dh-light-content {
  background: var(--dh-bg-light);
  color: var(--dh-text-on-light);
  border-radius: var(--dh-radius-lg);
  border: 1px solid rgba(16, 24, 39, 0.08);
}

.dh-light-content p,
.dh-light-content li,
.dh-light-content td,
.dh-light-content th,
.dh-light-content span,
.dh-light-content a {
  color: var(--dh-text-on-light) !important;
}

.dh-light-content a:hover {
  color: var(--dh-accent) !important;
}

.dh-module-output.dh-dark-content,
.dh-richtext.dh-dark-content {
  color: var(--dh-text-secondary);
}

.dh-module-output.dh-dark-content a,
.dh-richtext.dh-dark-content a {
  color: var(--dh-accent-2);
}