/* Lang Cloud Browser shared visual tokens.
 * Loaded last so the public store, customer portal, and admin console share
 * one palette without changing their markup or business behavior.
 */
:root {
  --lcb-primary: #2376c9;
  --lcb-primary-dark: #155b9d;
  --lcb-primary-soft: #eaf5ff;
  --lcb-orange: #f36f28;
  --lcb-canvas: #f5f8fb;
  --lcb-surface: #ffffff;
  --lcb-ink: #172b3d;
  --lcb-muted: #64798b;
  --lcb-line: #dce6ef;
  --lcb-line-strong: #b8ccdd;
  --lcb-sidebar: #12395f;
  --lcb-link: #155b9d;
}

/* Admin SPA tokens (index-CX4X_FPA.css and tech-overrides.css). */
:root {
  --canvas: var(--lcb-canvas) !important;
  --surface: var(--lcb-surface) !important;
  --surface-muted: #eef3f8 !important;
  --surface-raised: var(--lcb-surface) !important;
  --text: var(--lcb-ink) !important;
  --text-muted: var(--lcb-muted) !important;
  --text-faint: #8295a5 !important;
  --border: var(--lcb-line) !important;
  --border-strong: var(--lcb-line-strong) !important;
  --primary: var(--lcb-primary) !important;
  --primary-hover: var(--lcb-primary-dark) !important;
  --primary-soft: var(--lcb-primary-soft) !important;
  --info: var(--lcb-primary) !important;
  --info-soft: var(--lcb-primary-soft) !important;
  --sidebar: var(--lcb-sidebar) !important;
  --sidebar-border: #28577f !important;
  --sidebar-text: #f2f8ff !important;
  --sidebar-muted: #b7cde0 !important;
  --focus: var(--lcb-primary) !important;
  --grid-line: rgba(35, 118, 201, .07) !important;
  --tech-glow: rgba(35, 118, 201, .18) !important;
}

:root[data-theme="dark"] {
  --lcb-canvas: #0d1c2d;
  --lcb-surface: #13283b;
  --lcb-ink: #eef6ff;
  --lcb-muted: #b4c8d8;
  --lcb-line: #2c4c66;
  --lcb-line-strong: #47708e;
  --lcb-primary-soft: #173d60;
  --lcb-link: #8ec7ff;
  --canvas: #0d1c2d !important;
  --surface: #13283b !important;
  --surface-muted: #1a3449 !important;
  --surface-raised: #183149 !important;
  --text: #eef6ff !important;
  --text-muted: #b4c8d8 !important;
  --text-faint: #8fa9bb !important;
  --border: #2c4c66 !important;
  --border-strong: #47708e !important;
  --primary: var(--lcb-primary) !important;
  --primary-hover: var(--lcb-primary-dark) !important;
  --primary-soft: #173d60 !important;
  --info: #8ec7ff !important;
  --info-soft: #173d60 !important;
  --sidebar: #091b2d !important;
  --sidebar-border: #244866 !important;
  --sidebar-text: #f1f7ff !important;
  --sidebar-muted: #a2bdd1 !important;
  --focus: #8ec7ff !important;
  --grid-line: rgba(99, 169, 236, .11) !important;
  --tech-glow: rgba(99, 169, 236, .24) !important;
}

/* The compiled storefront uses separate variable namespaces. Point both at
 * the same blue system so an authenticated catalog page cannot drift green. */
.store-shell,
.home-page {
  --store-accent: var(--lcb-primary);
  --store-accent-dark: var(--lcb-primary-dark);
  --store-accent-soft: var(--lcb-primary-soft);
  --store-mint: var(--lcb-primary);
  --store-mint-dark: var(--lcb-primary-dark);
  --store-mint-soft: var(--lcb-primary-soft);
  --home-blue: var(--lcb-primary);
  --home-blue-dark: var(--lcb-primary-dark);
  --home-blue-soft: var(--lcb-primary-soft);
  --home-mint: var(--lcb-primary);
  --home-mint-dark: var(--lcb-primary-dark);
  --home-mint-soft: var(--lcb-primary-soft);
}

/* Admin login had a separate dark teal treatment. Keep it in the same light
 * commercial system as the homepage and customer entry point. */
.login-page {
  background: var(--lcb-canvas) !important;
}
.login-page::before {
  background: var(--lcb-primary) !important;
}
.login-page::after {
  background: var(--lcb-orange) !important;
}
.login-page .login-card {
  border: 1px solid var(--lcb-line-strong) !important;
  border-top: 0 !important;
  border-radius: 10px !important;
  background: var(--lcb-surface) !important;
  color: var(--lcb-ink) !important;
  box-shadow: 0 24px 60px rgba(19, 55, 87, .12) !important;
}
.login-page .login-card-header,
.login-page .login-card-footer {
  border-color: var(--lcb-line) !important;
  background: var(--surface-muted) !important;
}
.login-page .login-card-header h1,
.login-page .login-card-header p,
.login-page .login-form label {
  color: var(--lcb-ink) !important;
}
.login-page .login-card-header p,
.login-page .login-card-footer {
  color: var(--lcb-muted) !important;
}
.login-page .login-card-header > div > span,
.login-page .login-card-footer a {
  color: var(--lcb-link) !important;
}
.login-page .login-card-mark {
  border-color: var(--lcb-primary) !important;
  background: var(--lcb-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(35, 118, 201, .2) !important;
}
.login-page .login-control-with-icon,
.login-page .login-password-field,
.login-page .captcha-input,
.login-page .captcha-image-button {
  border-color: var(--lcb-line-strong) !important;
  background: var(--lcb-surface) !important;
  color: var(--lcb-ink) !important;
}
.login-page .login-control-with-icon:focus-within,
.login-page .login-password-field:focus-within {
  border-color: var(--lcb-primary) !important;
  box-shadow: 0 0 0 3px rgba(35, 118, 201, .14) !important;
}
.login-page .captcha-image-button:hover:not(:disabled) {
  border-color: var(--lcb-primary) !important;
  background: var(--lcb-primary-soft) !important;
}
.login-page .login-submit {
  border-color: var(--lcb-primary) !important;
  background: var(--lcb-primary) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(35, 118, 201, .18) !important;
}
.login-page .login-submit:hover:not(:disabled) {
  border-color: var(--lcb-link) !important;
  background: var(--lcb-primary-dark) !important;
}

/* Customer portal token bridge. */
body.customer-surface {
  --bg: var(--lcb-canvas);
  --panel: var(--lcb-surface);
  --ink: var(--lcb-ink);
  --muted: var(--lcb-muted);
  --line: var(--lcb-line);
  --accent: var(--lcb-primary);
  --accent-ink: #fff;
  --soft: var(--lcb-primary-soft);
}
body.customer-surface .mark {
  background: var(--lcb-primary);
  color: #fff;
}
body.customer-surface .auth-panel {
  border-color: var(--lcb-line-strong);
  box-shadow: 0 24px 60px rgba(19, 55, 87, .12);
}
body.customer-surface .auth-panel::before {
  background: linear-gradient(90deg, var(--lcb-primary-dark), var(--lcb-primary)) !important;
}
body.customer-surface .auth-panel .primary {
  box-shadow: 0 8px 20px rgba(35, 118, 201, .2);
}
body.customer-surface .auth-panel a,
body.customer-surface .eyebrow,
body.customer-surface .nat-ready {
  color: var(--lcb-link);
}
body.customer-surface input:focus,
body.customer-surface select:focus,
body.customer-surface textarea:focus {
  border-color: var(--lcb-primary);
  box-shadow: 0 0 0 3px rgba(35, 118, 201, .14);
}

/* Home inline CSS keeps its own short variable names; map them to the same
 * tokens and remove the previous green mint accents. */
body.home-surface {
  --blue: var(--lcb-primary);
  --dark: var(--lcb-primary-dark);
  --soft: var(--lcb-primary-soft);
  --orange: var(--lcb-orange);
  --ink: var(--lcb-ink);
  --muted: var(--lcb-muted);
  --line: var(--lcb-line);
  --canvas: var(--lcb-canvas);
  --surface: var(--lcb-surface);
}
body.home-surface .feature:nth-child(2) {
  border-top-color: var(--lcb-primary) !important;
}

/* Shared controls keep the homepage's white-on-blue button treatment. */
.button.primary, .button.primary:hover:not(:disabled) { color: #fff; }
.lcb-version-badge {
  background: var(--lcb-primary-soft) !important;
  border-color: var(--lcb-line-strong) !important;
  color: var(--lcb-link) !important;
}
body { background-image: none; }
body.customer-surface .primary:hover:enabled {
  background: var(--lcb-primary-dark);
  border-color: var(--lcb-primary-dark);
  filter: none;
}
body.customer-surface .tabs button.active { color: var(--lcb-link); }
body.home-surface .tooltip > span {
  left: auto;
  right: 0;
  transform: translateY(5px);
}
body.home-surface .tooltip:hover > span,
body.home-surface .tooltip:focus > span { transform: translateY(0); }
body.customer-surface #message.error {
  background: var(--danger-soft, #faeaea);
  outline: none;
}
body.customer-surface #message.error:focus-visible { outline: 2px solid var(--danger); }

/* Dynamic admin panels inject styles after page load. Scope these bridges to
 * their own components so their loading order cannot reintroduce teal. */
:is(.lcb-share-button, .lcb-restart-button, .lcb-product-launcher) {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
:is(.lcb-share-panel, .lcb-file-panel, .lcb-product-panel) {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
:is(.lcb-share-panel, .lcb-file-panel, .lcb-product-panel) :is(input, select, textarea) {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
:is(.lcb-share-panel, .lcb-file-panel, .lcb-product-panel) :is(label, small, p) {
  color: var(--text-muted) !important;
}
:is(.lcb-share-actions, .lcb-file-close, .lcb-product-actions) button {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
:is(.lcb-share-actions, .lcb-file-close, .lcb-product-actions) button.primary,
.lcb-credential-form button, .lcb-access-secret-row button {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.lcb-product-checks label {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
:is(.lcb-file-row, .lcb-credential-row, .lcb-file-actions button,
    .lcb-credential-actions button, .lcb-dialog-dismiss) {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.lcb-file-status { color: var(--text-muted); }
.lcb-file-status.error { color: var(--danger); }
:is(.lcb-file-upload, .lcb-access-secret, .lcb-dialog-heading,
    .lcb-product-status, .lcb-nat-addon, .lcb-nat-order-links) {
  background: var(--primary-soft) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.lcb-product-status.error {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}
.lcb-nat-order-links a { color: var(--lcb-link) !important; }
:is(.lcb-nat-agent, .lcb-recovery-node, .lcb-product-panel) small,
.lcb-product-help { color: var(--text-muted) !important; }
:is(.lcb-share-panel, .lcb-file-panel, .lcb-product-panel) :focus-visible {
  outline-color: var(--focus) !important;
}