/**
 * ATS base — global dark surface for every page.
 *
 * The whole front end runs `.dark`, matching algotradingspace.com. Scoping it to
 * "member pages" left things like /vip/accounts/ white, which reads as something
 * having been hidden rather than redesigned. Anything that assumes a light
 * background gets corrected here instead of being routed around.
 *
 * Everything consumes tokens.css. No literal colours.
 */

/* ===============================================================
   Light theme corrections

   tokens.css is generated from the app's tailwind.css and is not edited by
   hand, but two of its light values do not survive contact with this UI:
   the page and cards are both pure white, so nothing separates them, and
   the accent green is a neon meant for dark backgrounds. Corrected here so
   a regenerated tokens.css keeps overwriting cleanly.
   =============================================================== */

:root.light {
  /* Canvas steps back so white cards read as cards. Still light enough to
     stay legible as button label text, which also uses this token. */
  --color-body: #F4F7FB;
  /* #00ff88 is ~1.4:1 on white. This holds the same hue at ~4.8:1. */
  --color-brand-accent: #067F4A;
}

/* ===============================================================
   Page shell
   =============================================================== */

html {
  background: var(--color-body);
}

body {
  background: var(--color-body);
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* Astra paints these from its own global colours, which leaves pale slabs
   behind the content on a dark page. */
#page,
#content,
#primary,
#secondary,
.site-content,
.ast-container,
.entry-content,
.ast-separate-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container,
.ast-page-builder-template {
  background: transparent;
}

.ast-separate-container .site-main > .ast-row,
.ast-separate-container #primary {
  background: transparent;
}

/* ===============================================================
   Typography
   =============================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a {
  color: var(--color-title);
  font-family: var(--font-title);
}

p, li, dd, dt, td, th, label, figcaption {
  color: inherit;
}

/* Low specificity on purpose (0,1,1) — component rules below and in portal.css
   must be able to win without escalating into :not() chains. */
a {
  color: var(--color-brand);
}

a:hover,
a:focus {
  color: var(--color-brand-dark);
}

hr,
.ast-separator {
  border-color: var(--color-border);
}

::selection {
  background: color-mix(in srgb, var(--color-brand) 35%, transparent);
  color: var(--color-title);
}

/* ===============================================================
   Header and footer
   =============================================================== */

.site-header,
#masthead,
.ast-primary-header-bar,
.ast-header-break-point .ast-mobile-header-wrap,
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-desktop-header-content {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.main-header-menu .menu-link,
.main-header-menu > .menu-item > .menu-link,
.ast-masthead-custom-menu-items,
.ast-header-break-point .main-header-menu .menu-link {
  color: var(--color-text-light);
}

.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
  color: var(--color-brand);
}

/* Sub-menus sit on the page, not the header bar. */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.site-footer,
.ast-small-footer,
footer.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

/* The stock logo is dark artwork, which needs replacing only on a dark
   masthead — in light mode the uploaded logo is already correct. */
.dark .custom-logo,
.dark .site-logo-img img,
.dark .ast-site-identity img {
  content: url("../img/Algo-Trading-Space-logo-white-min.png");
}

/* ===============================================================
   Surfaces
   =============================================================== */

.ast-article-post,
.ast-article-single,
.ast-separate-container .ast-article-post,
.widget,
.wp-block-group.has-background,
.ast-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}

/* Spectra / UAG containers are used on ~95 pages here. They inherit rather
   than carrying their own light background. */
.wp-block-uagb-container,
.uagb-container-inner-blocks-wrap {
  background: transparent;
}

/* ===============================================================
   Forms
   =============================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-form-border);
  border-radius: var(--radius-md);
  color: var(--color-title);
  font-family: var(--font-sans);
  font-size: var(--text-dense-body);
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-form-focus);
  box-shadow: 0 0 0 3px var(--color-brand-hover-shadow);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

/* ===============================================================
   Buttons

   --color-body is near-black in dark and white in light, so one declaration
   stays legible on the brand fill in either theme.
   =============================================================== */

.wp-block-button__link,
.ast-button,
button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-element-button {
  background: var(--color-brand);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: var(--text-dense-body);
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 20px;
  transition: filter 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-element-button:hover {
  background: var(--color-brand-dark);
  color: var(--color-body);
  box-shadow: var(--shadow-brand);
}

/* ===============================================================
   Tables — used heavily by Space Tracker, orders and the affiliate area
   =============================================================== */

table {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text);
  width: 100%;
}

table th {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-dense-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 14px;
  text-align: left;
  text-transform: uppercase;
}

table td {
  background: transparent;
  border-top: 1px solid var(--color-border);
  padding: 12px 14px;
}

table tbody tr:hover td {
  background: var(--color-surface-alt);
}

/* ===============================================================
   Scrollbars — a light scrollbar on a dark page is a giveaway
   =============================================================== */

* {
  scrollbar-color: var(--color-surface-alt) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border);
}

/* Tell the browser to render native controls to match. */
:root.dark {
  color-scheme: dark;
}

:root.light {
  color-scheme: light;
}

/* ===============================================================
   Header cart

   Astra's outline cart draws its border and count bubble from
   --ast-global-color-0, which the palette maps to the brand colour — so the
   bubble rendered brand-on-brand and read as a plain filled dot. Astra's own
   selectors are (0,3,1), so these have to match that weight rather than rely
   on load order.
   =============================================================== */

.ast-site-header-cart .cart-container {
  color: var(--color-text-light);
}

.ast-site-header-cart.ast-menu-cart-outline .ast-addon-cart-wrap,
.ast-site-header-cart.ast-menu-cart-with-border .ast-addon-cart-wrap {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
}

.ast-site-header-cart .cart-container:hover .ast-addon-cart-wrap {
  border-color: var(--color-brand);
}

.ast-site-header-cart .ast-icon svg,
.ast-site-header-cart i.astra-icon svg {
  fill: currentColor;
}

/* Count bubble: brand fill, dark glyphs. */
.ast-site-header-cart .ast-addon-cart-wrap i.astra-icon::after,
.ast-site-header-cart i.astra-icon::after {
  background: var(--color-brand);
  color: var(--color-body);
  border: none;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 18px;
}

/* An empty cart should show no bubble at all, rather than a "0" chip. */
.ast-site-header-cart .ast-addon-cart-wrap i.astra-icon[data-cart-total="0"]::after,
.ast-site-header-cart i.astra-icon[data-cart-total="0"]::after,
.ast-site-header-cart i.astra-icon.no-cart-total::after {
  display: none;
}