/* RoboLan customer storefront theme. Admin surfaces intentionally do not load this file. */

html[data-theme="retail-light"] {
  color-scheme: light;

  --canvas: #f5f7fb;
  --canvas-raised: #f9fbff;
  --surface: #ffffff;
  --surface-subtle: #edf3fc;
  --surface-strong: #dde8f7;

  --ink: #111827;
  --ink-secondary: #475569;
  --ink-tertiary: #607087;
  --ink-on-accent: #ffffff;

  --line: rgba(51, 65, 85, 0.12);
  --line-strong: rgba(51, 65, 85, 0.2);

  --accent: #2f6fe4;
  --accent-hover: #245fc8;
  --accent-pressed: #1f4fa9;
  --accent-soft: #e7eefc;
  --accent-softer: #f1f5fd;

  --success: #147447;
  --success-soft: #e7f5ed;
  --warning: #805600;
  --warning-soft: #fff4d6;
  --danger: #b42318;
  --danger-soft: #fcebea;

  --focus: #2f6fe4;
  --scrim: rgba(15, 23, 42, 0.42);
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);

  background: var(--canvas);
}

html[data-theme="retail-light"] body {
  background: var(--canvas);
  color: var(--ink);
}

html[data-theme="retail-light"] ::selection {
  background: var(--accent-soft);
  color: var(--accent-pressed);
}

html[data-theme="retail-light"] :focus-visible {
  outline-color: var(--focus);
}

html[data-theme="retail-light"] .site-header:not(.atlas-header),
html[data-theme="retail-light"] .auth-header {
  border-bottom-color: var(--line-strong);
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="retail-light"] .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
}

html[data-theme="retail-light"] .wordmark:not(.atlas-wordmark)::after {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(47, 111, 228, 0.1);
  content: "";
}

html[data-theme="retail-light"] .public-nav a,
html[data-theme="retail-light"] .header-text-link,
html[data-theme="retail-light"] .auth-header a:not(.wordmark) {
  color: var(--ink-secondary);
}

html[data-theme="retail-light"] .public-nav a:hover,
html[data-theme="retail-light"] .public-nav a[aria-current="page"],
html[data-theme="retail-light"] .header-text-link:hover,
html[data-theme="retail-light"] .auth-header a:not(.wordmark):hover {
  color: var(--accent-pressed);
}

html[data-theme="retail-light"] .button-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
  box-shadow: none;
}

html[data-theme="retail-light"] .button-primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

html[data-theme="retail-light"] .button-primary:active {
  border-color: var(--accent-pressed);
  background: var(--accent-pressed);
}

html[data-theme="retail-light"] .button-secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

html[data-theme="retail-light"] .button-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-softer);
}

html[data-theme="retail-light"] .button-quiet,
html[data-theme="retail-light"] .text-link,
html[data-theme="retail-light"] .back-link,
html[data-theme="retail-light"] .password-toggle {
  color: var(--accent-pressed);
}

html[data-theme="retail-light"] .button-quiet:hover {
  background: var(--accent-soft);
}

html[data-theme="retail-light"] .button[disabled],
html[data-theme="retail-light"] .button.is-disabled {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--ink-tertiary);
}

html[data-theme="retail-light"] .mobile-nav > summary:hover {
  background: var(--accent-softer);
  color: var(--accent-pressed);
}

html[data-theme="retail-light"] .mobile-nav-panel {
  border-bottom-color: var(--line-strong);
  background: #ffffff;
  box-shadow: none;
}

html[data-theme="retail-light"] .mobile-nav-panel a[aria-current="page"] {
  color: var(--accent-pressed);
}

html[data-theme="retail-light"] .site-footer {
  border-top-color: var(--line);
  background: var(--canvas);
}

html[data-theme="retail-light"] .page-notice {
  border: 1px solid rgba(47, 111, 228, 0.14);
  background: var(--accent-softer);
}

html[data-theme="retail-light"] .status-pill {
  border: 1px solid var(--line);
  background: var(--surface-subtle);
}

html[data-theme="retail-light"] .status-pill.is-accent {
  border-color: rgba(47, 111, 228, 0.22);
  background: var(--accent-soft);
  color: var(--accent-pressed);
}

html[data-theme="retail-light"] .status-pill.is-success {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

html[data-theme="retail-light"] .status-pill.is-warning {
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}

html[data-theme="retail-light"] .field input,
html[data-theme="retail-light"] .field select,
html[data-theme="retail-light"] .field textarea {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="retail-light"] .field input::placeholder,
html[data-theme="retail-light"] .field textarea::placeholder {
  color: var(--ink-tertiary);
}

html[data-theme="retail-light"] .field input:focus,
html[data-theme="retail-light"] .field select:focus,
html[data-theme="retail-light"] .field textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.14);
}

html[data-theme="retail-light"] input:-webkit-autofill,
html[data-theme="retail-light"] input:-webkit-autofill:hover,
html[data-theme="retail-light"] input:-webkit-autofill:focus,
html[data-theme="retail-light"] textarea:-webkit-autofill,
html[data-theme="retail-light"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--surface) inset;
}

html[data-theme="retail-light"] .auth-body,
html[data-theme="retail-light"] .auth-header {
  background: var(--canvas-raised);
}

html[data-theme="retail-light"] .auth-mark {
  box-shadow:
    0 0 0 1px rgba(47, 111, 228, 0.12),
    0 4px 8px rgba(47, 111, 228, 0.1);
}

html[data-theme="retail-light"] .auth-heading {
  color: var(--ink);
}

html[data-theme="retail-light"] .redeem-preview {
  border-color: var(--line-strong);
}

html[data-theme="retail-light"] .redeem-balance,
html[data-theme="retail-light"] .wallet-balance,
html[data-theme="retail-light"] .detail-price {
  color: var(--accent-pressed);
}

html[data-theme="retail-light"] .product-landing-hero,
html[data-theme="retail-light"] .plans-preview {
  background: var(--canvas-raised);
}

html[data-theme="retail-light"] .product-landing-copy h1 {
  font-size: clamp(3.75rem, 8vw, 6rem);
}

html[data-theme="retail-light"] .product-story-section {
  border-color: var(--line);
  background: var(--surface);
}

html[data-theme="retail-light"] .family-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent-pressed);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

html[data-theme="retail-light"] .plan-link:hover,
html[data-theme="retail-light"] .plan-link:focus-visible {
  background: var(--accent-softer);
}

html[data-theme="retail-light"] .detail-sticky-bar {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="retail-light"] .purchase-dialog {
  border: 1px solid var(--line-strong);
}

html[data-theme="retail-light"] .purchase-dialog::backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-theme="retail-light"] .wallet-overview,
html[data-theme="retail-light"] .account-empty-state,
html[data-theme="retail-light"] .service-sheet,
html[data-theme="retail-light"] .record-sheet,
html[data-theme="retail-light"] .detail-sheet,
html[data-theme="retail-light"] .connection-sheet {
  border: 1px solid var(--line);
  box-shadow: none;
}

html[data-theme="retail-light"] .provisioning-message {
  border-block: 1px solid rgba(47, 111, 228, 0.12);
}

html[data-theme="retail-light"] .record-sheet .account-empty-state {
  border: 0;
}

@media (prefers-contrast: more) {
  html[data-theme="retail-light"] {
    --ink-secondary: #334155;
    --ink-tertiary: #475569;
    --line: rgba(17, 24, 39, 0.25);
    --line-strong: rgba(17, 24, 39, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="retail-light"] .button:hover,
  html[data-theme="retail-light"] .button:active {
    transform: none;
  }
}