/* ==========================================================================
   Udeyou OTP: X-style dark mode (pure black & white, like x.com)
   Light mode  = data-theme="dark" (the navy look, unchanged).
   Dark mode   = data-theme="dark" + data-x  → this file overrides everything
   to monochrome black/white. Loaded last so it wins over every page sheet.
   ========================================================================== */

/* ---------- Tokens ---------- */
html[data-x] {
  color-scheme: dark;

  --ink-950: #000000;
  --ink-900: #000000;
  --ink-800: #16181C;
  --ink-700: #202327;

  --brand: #FFFFFF;
  --brand-600: #D7DBDC;
  --brand-700: #FFFFFF;
  --brand-300: #FFFFFF;
  --brand-50: rgba(255, 255, 255, .08);
  --brand-100: rgba(255, 255, 255, .16);
  --brand-200: rgba(255, 255, 255, .28);
  --cyan: #FFFFFF;
  --cyan-300: #E7E9EA;
  --grad: linear-gradient(135deg, #333639 0%, #202327 100%);
  --grad-text: linear-gradient(90deg, #FFFFFF 0%, #E7E9EA 100%);
  --grad-text-light: linear-gradient(90deg, #FFFFFF 0%, #E7E9EA 100%);

  --ok: #E7E9EA;
  --ok-text: #E7E9EA;
  --ok-bg: rgba(255, 255, 255, .06);
  --ok-line: #2F3336;
  --warn: #E7E9EA;
  --warn-text: #E7E9EA;
  --warn-bg: rgba(255, 255, 255, .06);
  --warn-line: #2F3336;
  --danger: #E7E9EA;
  --danger-text: #FFFFFF;
  --danger-bg: rgba(255, 255, 255, .08);
  --danger-line: #536471;
  --info-text: #E7E9EA;
  --info-bg: rgba(255, 255, 255, .06);
  --info-line: #2F3336;

  --text: #E7E9EA;
  --heading: #FFFFFF;
  --muted: #71767B;
  --subtle: #71767B;
  --line: #2F3336;
  --line-strong: #3E4144;
  --bg: #000000;
  --surface: #000000;
  --surface-2: #16181C;
  --surface-3: #202327;
  --hover: rgba(231, 233, 234, .06);
  --link: #FFFFFF;
  --link-hover: #E7E9EA;

  --input-bg: #000000;
  --input-line: #333639;
  --input-line-hover: #536471;
  --placeholder: #71767B;

  --code-bg: #16181C;
  --code-text: #E7E9EA;
  --code-line: #2F3336;

  --on-dark: #FFFFFF;
  --on-dark-muted: #A0A4A8;
  --on-dark-subtle: #71767B;
  --on-dark-line: #2F3336;

  --header-bg: rgba(0, 0, 0, .65);
  --header-line: #2F3336;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: 0 0 0 1px #2F3336;
  --shadow-lg: 0 0 0 1px #2F3336;
  --shadow-xl: 0 0 0 1px #2F3336;
  --ring: 0 0 0 2px rgba(255, 255, 255, .5);

  scrollbar-color: #333639 #000000;
}

/* ---------- Page surfaces → pure black ---------- */
html[data-x] body,
html[data-x] .site-main,
html[data-x] .page-dashboard .site-main,
html[data-x] .page-admin .site-main,
html[data-x] .site-header,
html[data-x] .site-header.is-dark,
html[data-x] .site-footer,
html[data-x] .hero,
html[data-x] .p-hero,
html[data-x] .page-hero,
html[data-x] .docs-hero,
html[data-x] .section.alt,
html[data-x] .section.dark,
html[data-x] .cta-band,
html[data-x] .cta-panel,
html[data-x] .trust,
html[data-x] .trust-item,
html[data-x] .nav-panel,
html[data-x] .side-nav,
html[data-x] .auth-page,
html[data-x] .auth-page .auth-aside {
  background: #000000 !important;
  background-image: none !important;
}
html[data-x] .site-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(0, 0, 0, .65) !important; }
html[data-x] .trust { --trust-bg: #000000; }
html[data-x] .trust-row { background: #2F3336; }

/* Decorative grids, glows and gradient lines off */
html[data-x] .hero::before, html[data-x] .hero::after,
html[data-x] .p-hero::before, html[data-x] .p-hero::after,
html[data-x] .page-hero::before,
html[data-x] .docs-hero::before,
html[data-x] .cta-band::before, html[data-x] .cta-panel::before,
html[data-x] .site-footer::before,
html[data-x] .code-window::before,
html[data-x] .p-hero-art::before,
html[data-x] .hero-art { display: none !important; }

/* Bordered black cards, X style */
html[data-x] .card,
html[data-x] .panel,
html[data-x] .kpi,
html[data-x] .stat-card,
html[data-x] .feature-card, html[data-x] .feat-card,
html[data-x] .plan, html[data-x] .plan.is-featured,
html[data-x] .channel-card, html[data-x] .channel-card.is-live,
html[data-x] .mini-card,
html[data-x] .custom-plan,
html[data-x] .flow-step,
html[data-x] .qa,
html[data-x] .table-wrap,
html[data-x] .chart-card,
html[data-x] .sec-item,
html[data-x] .page-hero,
html[data-x] .cta-band, html[data-x] .cta-panel,
html[data-x] .art-frame {
  background: #000000 !important;
  background-image: none !important;
  border: 1px solid #2F3336 !important;
  box-shadow: none !important;
}
html[data-x] .plan.is-featured,
html[data-x] .channel-card.is-live { border-color: #E7E9EA !important; }
html[data-x] .card:hover, html[data-x] .kpi:hover, html[data-x] .feature-card:hover,
html[data-x] .feat-card:hover, html[data-x] .plan:hover, html[data-x] .mini-card:hover { background: #080808 !important; }

/* Raised grey surfaces */
html[data-x] .mail-card,
html[data-x] .verified-chip,
html[data-x] .feat-media,
html[data-x] .feat-ico-img,
html[data-x] th,
html[data-x] .check-row,
html[data-x] .code-input {
  background: #16181C !important;
  background-image: none !important;
  box-shadow: 0 0 0 1px #2F3336 !important;
  color: #E7E9EA;
}
html[data-x] .otp-digits span { background: #000000 !important; border-color: #333639 !important; color: #FFFFFF !important; }
html[data-x] .mail-avatar { background: #333639 !important; }
html[data-x] .mail-from span, html[data-x] .mail-text, html[data-x] .mail-expiry, html[data-x] .mail-time { color: #71767B !important; }

/* Code */
html[data-x] pre, html[data-x] pre.code-box,
html[data-x] .code-window,
html[data-x] .page-docs .dc-code, html[data-x] .page-docs [class*="dc-code"] {
  background: #000000 !important;
  background-image: none !important;
  border-color: #2F3336 !important;
  box-shadow: none !important;
}
html[data-x] .page-docs {
  --dc-code-bg: #000000; --dc-code-bar: #16181C; --dc-code-border: #2F3336;
  --dc-hero-top: #000000; --dc-grid: transparent; --dc-frame-top: #000000; --dc-frame-bottom: #000000;
}
html[data-x] .code-window-bar { background: #16181C !important; border-bottom-color: #2F3336 !important; }
html[data-x] .code-window .code-window-body,
html[data-x] .t-method, html[data-x] .t-key, html[data-x] .t-str, html[data-x] .t-num, html[data-x] .t-bool,
html[data-x] pre.code-box .tk, html[data-x] pre.code-box .ts,
html[data-x] .code-window .tk, html[data-x] .code-window .ts,
html[data-x] [class^="tk-"], html[data-x] [class*=" tk-"] { color: #E7E9EA !important; }
html[data-x] .t-head, html[data-x] .t-punc, html[data-x] .t-dim, html[data-x] .t-comment,
html[data-x] pre.code-box .tc, html[data-x] .code-window .tc { color: #71767B !important; }
html[data-x] .dots i { background: #333639 !important; }
html[data-x] .status-pill, html[data-x] .copy-btn, html[data-x] .cw-copy, html[data-x] .code-tab.on,
html[data-x] .code-tab[aria-selected="true"] { color: #E7E9EA !important; background: #16181C !important; border-color: #333639 !important; }
html[data-x] .caret { background: #FFFFFF !important; }

/* Buttons: X primary = white pill with black text */
html[data-x] .btn,
html[data-x] .btn.primary,
html[data-x] .btn.grad,
html[data-x] .btn.light,
html[data-x] .btn.gold,
html[data-x] .cta-band .btn:not(.ghost),
html[data-x] .dl-btn {
  background: #EFF3F4 !important;
  background-image: none !important;
  color: #0F1419 !important;
  border-color: #EFF3F4 !important;
  box-shadow: none !important;
}
html[data-x] .btn:hover,
html[data-x] .btn.primary:hover,
html[data-x] .btn.grad:hover,
html[data-x] .btn.light:hover,
html[data-x] .cta-band .btn:not(.ghost):hover,
html[data-x] .dl-btn:hover { background: #D7DBDC !important; color: #0F1419 !important; }
html[data-x] .btn.secondary,
html[data-x] .btn.ghost,
html[data-x] .btn.ink,
html[data-x] .btn.danger,
html[data-x] .btn-alt {
  background: transparent !important;
  color: #EFF3F4 !important;
  border: 1px solid #536471 !important;
  box-shadow: none !important;
}
html[data-x] .btn.secondary:hover, html[data-x] .btn.ghost:hover, html[data-x] .btn.ink:hover,
html[data-x] .btn.danger:hover, html[data-x] .btn-alt:hover { background: rgba(239, 243, 244, .1) !important; color: #FFFFFF !important; }
html[data-x] .btn.danger.solid { background: #FFFFFF !important; color: #000000 !important; }

/* Elements that put white text on the brand colour */
html[data-x] .tag.live, html[data-x] .badge.live,
html[data-x] .dc-method.is-post, html[data-x] .dc-method.is-get { background: #EFF3F4 !important; color: #0F1419 !important; border-color: #EFF3F4 !important; }

/* Badges, tags, chips → grey outline */
html[data-x] .badge, html[data-x] .tag, html[data-x] .t-badge,
html[data-x] .p-chip, html[data-x] .hero-badge, html[data-x] .brand-tag,
html[data-x] .lang-chip, html[data-x] .lang-btn.on, html[data-x] .side-link.on,
html[data-x] .dc-guide-links a {
  color: #E7E9EA !important;
  background: rgba(255, 255, 255, .04) !important;
  border-color: #2F3336 !important;
  box-shadow: none !important;
}
html[data-x] .side-link.on { background: #16181C !important; }
html[data-x] .hero-badge-dot, html[data-x] .p-chip-dot { background: #FFFFFF !important; box-shadow: none !important; }

/* Icon tiles and small accents */
html[data-x] .icon-tile, html[data-x] .kpi-ic, html[data-x] .feat-icon, html[data-x] .fact-ico,
html[data-x] .check-list .ck, html[data-x] .orbit-node, html[data-x] .chip-ico,
html[data-x] .icon-tile.on-dark {
  color: #FFFFFF !important;
  background: #16181C !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px #2F3336 !important;
}
html[data-x] .step-num, html[data-x] .plan-flag, html[data-x] .side-avatar,
html[data-x] .flow-step-ic, html[data-x] .faq-num {
  color: #000000 !important;
  background: #FFFFFF !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-x] .orbit-ring { border-color: #2F3336 !important; background: none !important; }
html[data-x] .orbit-dot { background: #FFFFFF !important; box-shadow: none !important; }
html[data-x] .orbit-core { box-shadow: 0 0 0 1px #2F3336 !important; }
html[data-x] .step:not(:last-child)::after { background: repeating-linear-gradient(90deg, #333639 0 6px, transparent 6px 12px) !important; }

/* Charts and meters */
html[data-x] .chart .bar, html[data-x] .chart .bar.green, html[data-x] .chart .bar.brand,
html[data-x] .chart .bar.cyan { background: #333639 !important; box-shadow: none !important; }
html[data-x] .chart .verified-part, html[data-x] .chart-legend .dot.verified,
html[data-x] .trial-meter i, html[data-x] .stat-meter i, html[data-x] .pay-meter i { background: #FFFFFF !important; }
html[data-x] .chart-legend .dot.sent { background: #333639 !important; }

/* Alerts */
html[data-x] .alert, html[data-x] .app-flash .alert.ok, html[data-x] .app-flash .alert.error {
  color: #E7E9EA !important; background: #16181C !important; border-color: #2F3336 !important;
}

/* Text accents */
html[data-x] .text-grad, html[data-x] .page-hero h1 span, html[data-x] .hero-title span {
  background: none !important; -webkit-text-fill-color: #FFFFFF !important; color: #FFFFFF !important;
}
html[data-x] .eyebrow, html[data-x] .kicker { color: #E7E9EA !important; }
html[data-x] .eyebrow::before, html[data-x] .kicker i, html[data-x] .dc-kicker::before { background: #FFFFFF !important; }
html[data-x] .main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #FFFFFF !important; }
html[data-x] tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 #FFFFFF !important; }
html[data-x] ::selection { background: rgba(255, 255, 255, .25); color: #FFFFFF; }
html[data-x] :focus-visible { outline-color: #FFFFFF !important; }

/* Images and logo in monochrome */
html[data-x] img, html[data-x] .hero-art { filter: grayscale(1); }
html[data-x] img[src*="logo-mark.png"] { filter: none !important; }

/* Scrollbar */
html[data-x] ::-webkit-scrollbar-thumb { background: #333639 !important; border-color: #000000 !important; }

/* Theme toggle */
html[data-x] .theme-toggle { color: #E7E9EA !important; background: transparent !important; border-color: #2F3336 !important; }

/* Toggle icons: moon in light (navy) mode, sun in X dark mode */
html:not([data-x]) .theme-toggle .ic-sun { display: none !important; }
html:not([data-x]) .theme-toggle .ic-moon { display: block !important; }
html[data-x] .theme-toggle .ic-sun { display: block !important; }
html[data-x] .theme-toggle .ic-moon { display: none !important; }